html - 工作位置：设置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更高的位置。见小提琴。

假设你没有设置z-indexon #headeror #footer（你说你想保持静态），那么堆栈上下文不会因为它嵌套在 another 中而发生变化div。z-index设置后，子元素的堆栈上下文就会更改。