Z 索引不起作用 - 替代技术或修复答案

【问题标题】：Z-Index Not Working - Alternative Technique or FixZ 索引不起作用 - 替代技术或修复
【发布时间】：2018-08-30 17:33:58
【问题描述】：

我已为固定位置的菜单栏分配了高 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">

【问题讨论】：

推荐阅读：philipwalton.com/articles/what-no-one-told-you-about-z-index
它们在不同的堆叠上下文中，你不能对它们使用z-index。
@CBroe 我在导航栏上使用了 0.7 的不透明度这一事实是否说明了这个问题？
Z-Index 比仅仅高于某个水平要复杂得多。将其视为堆叠在一起的书籍。仅仅因为它是一本书的第一页并不意味着它是所有书籍的第一页。
您应该将可停靠的标题菜单移动到正文的子项。与侧边栏和其他主要容器相同的级别。需要时显示，不用时隐藏

标签： html css z-index

【解决方案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应用于设置z-index的每个DIV。

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

谢谢。

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

【讨论】：

这是真的，而且有效。不知道为什么这被否决了。有没有cmets？
我想是因为我及时10000 =)
是的，它奏效了。我不知道为什么会有反对票
很可能是因为菜单本身需要悬停才能出现，所以当反对者检查并尝试它时没有悬停。菜单没有显示，所以他们认为它不起作用。但是任何知道 z-index 如何工作的人都应该知道这在他们检查时会起作用
那里有良好的记忆规则！

【解决方案2】：

z-index 不适用于子元素，因为声明了宽度和高度，我开始在子 div 悬停时在父 div 上添加 {display :Inline}。 p>

【讨论】：