Question

所以我正在为我的博客www.thatgirlmag.com创建一个新的布局，我希望在顶部有一个固定的导航栏（当你向下滚动时，它会随你而去）。我写了CSS（我认为），但是现在我看不到它了，因为当你登录到wordpress时它出现在栏后面。我可以把它向下移动，但是那些没有登录到wordpress的观众会看到一些奇怪的东西，对吧？当我从隐身窗口查看时，它看起来很奇怪。

我认为必须有更好的方法来做到这一点。我只是希望导航栏位于我博客的VISIBLE部分的顶部。帮助

这是我们正在查看的CSS

#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
}

另外，我的条形位于-10和110％宽，因为我希望它在整个页面上100％（并且设置宽度：100％使导航栏只是跨越元素的宽度，其中边距）。必须有更好的方法来做到这一点。有人能帮我吗？我不确定我是在解释这个问题。

Answer 1

您正在处理的是z-index。您需要将z-index值添加到定位对象（如#main-nav），以将其置于可见性上下文中，并将其与具有或不具有z-index值和位置的其他对象放在一起。

简要（来自https://developer.mozilla.org/en-US/docs/Web/CSS/z-index）

z-index CSS属性指定元素的z顺序及其顺序后人。当元素重叠时，z顺序决定哪一个涵盖了另一个。具有较大z指数的元素通常覆盖一个较低的元素。

在SO上查看z-index问题的其他答案：https://stackoverflow.com/search?q=z-index并查看Understanding z-index和 The Z-Index CSS Property: A Comprehensive Look | Smashing Magazine

对于WordPress管理栏，具体为：将其向下移动（仅限登录的管理员）以说明无法覆盖WP中的9999 z-index值通过定位管理栏div来实现核心CSS：

body.admin-bar .header {
      position:fixed;
      top: 28px;
      z-index: 1000;
      height: 40px;
}

请参阅http://wahldev.com/making-fixed-nav-work-with-the-wordpress-admin-bar/

Answer 2

尝试将z-index添加到main-nav。它看起来像这样：

#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
z-index: 9999;
}

我为z-index使用了一个大数字，因为wordpress可能会在div上给出一个z-index。

我为我的wordpress博客制作了一个固定的导航栏，但它隐藏在我的wordpress信息栏后面

2 个答案: