Question

我已经为一个固定定位的菜单栏分配了一个高z-index，但它仍然出现在我网站上的其他元素下面。是否有我可以使用的替代技术或我编写的代码有问题。我的问题网站是here（注意：向下滚动以显示导航栏后需要向上滚动）。未正确显示的菜单栏具有以下代码

#headerfull {
position:absolute;
top:-100px;
left:0;
z-index:10000;
width:100%;
height:100px;
background-color:#000000;
opacity:.7;
display:none;   
}

但是，由于某种原因，z-index不起作用。前面和中间的“NinjaWarrior.info”图像等元素，较低的z-index出现在导航栏的前面。该图片的代码位于

之下

<img style="position:absolute;z-index:10" src="images/logo_main.png" width="900" height="300" alt="American Ninja Warrior Fan Site">

Answer 1

添加此css：

#header {
    position: relative;
    z-index: 10000;
}

z-index适用于具有相同堆叠上下文的容器。

在您的代码中，DIV s header和content是兄弟姐妹，这是适用z-index个数字的条件。

记住此规则最简单的方法是“代码版本化”：

<DIV with z-index=1>
    <DIV with z-index=3/>   
</DIV>
<DIV with z-index=2>

因此，与小数或版本号一样，1.3 永远大于2，因此内部DIV将始终呈现在第二个外部DIV之下。

除此之外，您需要将positioning应用于设置z-index的每个DIV。

我只是设置了一个很大的数字，因为我很懒，如果你想要=），你可以自己找到一个好的可行数字，但是这个代码可以在我的网站上测试它。

谢谢。

请务必阅读：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Answer 2

由于声明了宽度和高度，z-index对我的子元素不起作用，我在子div悬停时在父div上添加了 {display：Inline} 。

Z指数不工作 - 替代技术或修复

2 个答案: