Div z索引不起作用

Question

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

当打开时，幻灯片显示会使半透明网页的其余部分变暗。 我的顶部导航条div（id =“topstrip”）不会位于黑暗的div（id =“jdarken”）后面。

任何想法 感谢

Answer 1

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

#jdarken（z-index：996）位于#contentarea内的#back（z-index：1）内。

从994>1开始，#header的所有孩子都将被吸引到#contentarea的所有孩子之上。 #jdarken位于不同的堆叠上下文中（由DOM树中的z索引节点分隔）而不是#topstrip，它们的相对z索引无关紧要。

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

对于z-index来说，元素必须#topstrip为物质（position会这样做）;但是，这个条件在这里得到满足。

Answer 2

为了使z-index属性起作用，元素的position属性应该是relative，absolute或fixed。

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

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