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

【问题标题】：I made a fixed navigation bar for my wordpress blog, but it's hiding behind my wordpress info-bar我为我的 wordpress 博客制作了一个固定的导航栏，但它隐藏在我的 wordpress 信息栏后面
【发布时间】：2013-12-10 23:31:07
【问题描述】：

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

我假设必须有更好的方法来做到这一点。我只希望导航栏位于我博客可见部分的顶部。帮忙？

这是我们正在查看的 CSS

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

此外，我将栏定位在 -10 和 110% 宽，因为我希望它 100% 穿过页面（设置 width: 100% 使导航栏刚好穿过元素的宽度，它有边距）。也必须有更好的方法来做到这一点。有人能帮我吗？我不确定我是否正确地解释了这一点。

【问题讨论】：

标签： css wordpress wordpress-theming navbar

【解决方案1】：

尝试将 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 使用 99999 作为管理栏的 z-index。即这不起作用。

【解决方案2】：

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

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

z-index CSS 属性指定元素的 z 顺序及其子孙。当元素重叠时，z-order 确定哪一个覆盖另一个。 z-index 较大的元素通常覆盖具有较低元素的元素。

查看关于 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 值核心 CSS 以 admin-bar div 为目标：

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/

【讨论】：

谢谢！我最终使用了#wpadminbar { z-index: 1000; }，这对我有用。谢谢！