Question

我正在尝试使用插件在我的WordPress页面顶部插入一个栏，但它出现在我的导航区域后面。

这是它的样子：https://cherinekurdi.com/home-test/

这是我插入的代码：

<div class="hello-head">
<div id="hello-head"> test
</div>
</div>

CSS代码：

#hello-head {
    z-index: 100001;
}

#hello-head  {
    color: #ccc;
    height: 32px;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 600px;
    z-index: 99999;
    background: #23282d;
    margin: 0 auto;
}

#hello-head , #hello-head {
    font-weight: 600;
    font-size: 1.5em;
    line-height: 32px;
    text-align: center;
}

编辑：这就是我想要它的样子。 screenshot

Answer 1

要让元素显示在＃34;顶部＆＃34;，您需要在背景中指定高于z-index元素的z-index。默认z-index为0，因此您在z-index的目标元素（#hello-head）上正确设置了更高的10001。

问题是z-index还明确要求您设置position属性而不是默认static才能正常工作。这取决于您希望自己的网站流动的方式，但您最有可能寻找position: relative，这会告诉该元素相对于其父级的位置：

<div class="hello-head">
  <div id="hello-head">test</div>
</div>

#hello-head {
    z-index: 100001;
    position: relative;
}

另请注意，您有一个类和hello-head的ID，这可能会导致混淆。在这方面，您不必要地使用多个CSS选择器;当可能意味着#hello-head定位类.hello-head选择器（定位 ID ） >。如果您只想纯粹定位ID，可以组合多个选择器，只需将上面的CSS（包含position）编写为一个选择器：

#hello-head { z-index: 100001; position: relative; // Added color: #ccc; height: 32px; top: 0; left: 0; width: 100%; min-width: 600px; z-index: 99999; background: #23282d; margin: 0 auto; font-weight: 600; font-size: 1.5em; line-height: 32px; text-align: center; }

希望这有帮助！：）

在wordpress的naviagtion栏顶部设一个栏

1 个答案: