使用周围的位置：静中设置的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明智），以便下拉可点击。我也希望滑块是可点击的（所以z-index：-1不是一个选项）。我需要#footer有position：static，所以我不能在那里设置z-index。

我认为答案在于重构我的HTML在某种程度上，但我想保留它的基本组织，如果可能的话。

在此先感谢。

Answer 1

两个元素仍然在同一个堆栈上下文中，因此只需添加z-index: 21（东西比#slider更高）的#navigation，并推动#navigation更高。 See the fiddle.

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