工作周围位置：静态设置z-index

Question

我试图让HTML中稍后呈现的元素显示在具有显式z-index的元素前面 - 见下文：

这是我的情况：

（jsFiddle：http://jsfiddle.net/hephistocles/78Wpc/）

相关HTML：

<div id="header">
    <div id="slider"></div>
</div>
<div id="content">
    ...
</div>
<div id="footer">
    <div id="navigation">
</div>

相关CSS：

#slider {
    z-index:20;
}
#navigation {
    position:absolute;
    top:200px;
}

我已将导航放在页脚中，因为我希望在导航内容之前加载滑块和内容。然后我使用CSS拉出导航，使其显示在滑块上方。

我希望导航在滑块上方呈现（z-index wise），因此下拉列表是可点击的。我还希望滑块可以点击（因此z-index：-1不是一个选项）。我需要#footer有位置：静态所以我不能在那里设置z-index。

我认为答案在于在某种程度上重构我的HTML，但我确实希望尽可能保留它的基本组织。

提前致谢。

Answer 1

两个元素仍处于相同的堆栈上下文中，因此只需将z-index: 21（高于#slider的内容）添加到#navigation，它就会将#navigation推高。 See the fiddle.

假设你没有在z-index或#header上设置#footer（你说你想保持静态），那么不是一个堆栈上下文的更改只是因为它嵌套在另一个div内。设置z-index后，然后子元素的堆栈上下文会发生变化。