Div z索引不起作用[关闭]答案

【问题标题】：Div z index not working [closed]Div z索引不起作用[关闭]
【发布时间】：2013-09-07 16:50:26
【问题描述】：

我在主页上有一个弹出式咖啡幻灯片 - theCoffeeLocator.com（点击“优势”打开幻灯片。

打开时，幻灯片会以半透明的方式使网页的其余部分变暗。我的顶部导航栏 div (id="topstrip") 不会位于变暗的 div (id="jdarken") 后面。

任何想法谢谢

【问题讨论】：

能把相关代码贴在这里吗？否则这个问题太本地化了——当你的页面被修复时，这个问题将变得毫无用处。

标签： css-float z-index transparent css-position

【解决方案1】：

#topstrip（z-index：995）位于#header（z-index：994）内#back。

#jdarken (z-index: 996) 位于#contentarea (z-index: 1) 内 #back。

由于994>1，#header 的所有子代将被绘制在#contentarea 的所有子代之上。 #jdarken 与 #topstrip 位于不同的堆叠上下文（由 DOM 树中的 z 索引节点分隔），它们的相对 z 索引无关紧要。

作为一种解决方案，我建议从 #contentarea 中删除 z-index。这会将#jdarken 放置到与#header 相同的堆栈上下文中，因此#jdarken 将堆栈在#header 之上（以及#topstrip 之上），因为996 > 994。如果我理解正确，#topstrip 的 z-index 也是未使用的，您可以删除该属性而不会产生任何后果。

同样，元素必须是positioned，z-index 才有意义（fixed 可以）；但是，这里满足这个条件。

【讨论】：

谢谢。从内容中删除了 z-index=1 并解决了。

【解决方案2】：

为了使 z-index 属性起作用，元素应具有相对、绝对或固定的位置属性。

当我检查你的源代码时，我注意到你的灰色元素位于其他一些元素中，z-index 行为受父母属性的影响，

尝试将您的 id="jdarken" div 重新定位到页面底部，然后尝试。

【讨论】：

position: fixed 也可以。
谢谢，我忘了提，答案已编辑。