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

Question

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

#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 适用于具有相同堆叠上下文的容器.

在你的代码中,DIVs 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每套DIV z-index.

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

谢谢.

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