绝对定位嵌套元素上的 z-index

Question

我有一些绝对定位的盒子。 其中之一具有嵌套弹出窗口，大于框。 我想在所有盒子前面弹出。

设置z-index: 100 on box 和z-index: 200 on popup 没有帮助。 在带有弹出框的框之后按文档顺序排列的框似乎超过了弹出框。 我想念 z 索引的什么？

 div { border: 1px solid black; } .container { position: relative; } .foo { position: absolute; background-color: white; width: 5em; z-index: 100; } #b0 { top: 0em; left: 0em; } #b1 { top: 3em; left: 1em; } #b2 { top: 6em; left: 2em; } #b3 { top: 9em; left: 3em; } #b4 { top: 12em; left: 4em; } .popup { z-index: 200; position: absolute; left: 1em; top: -1em; width: 8em; height: 8em; background-color: grey; }

 <div class="container"> <div class="foo" id="b0"> <span>absolute box b0</span> </div> <div class="foo" id="b1"> <span>absolute box b1</span> <div class="popup"> popup box inside b1 </div> </div> <div class="foo" id="b2"> <span>absolute box b2</span> </div> <div class="foo" id="b3"> <span>absolute box b3</span> </div> </div>

http://jsfiddle.net/B59pR/2/

Answer 1

您需要查看https://css-tricks.com/almanac/properties/z/z-index/以快速了解所有这些。 特别是在它说的部分：

另请注意，嵌套起着重要作用。 如果元素 B 位于元素 A 的顶部，则元素 A 的子元素永远不会高于元素 B。

您在那里所做的是从较低元素中获取子元素，并尝试将它们置于较高元素的子元素之上。

您需要做的就是在 z-index 101 上获取 #b1 框：

 div { border: 1px solid black; } .container { position: relative; } .foo { position: absolute; background-color: white; width: 5em; z-index: 100; } #b0 { top: 0em; left: 0em; } #b1 { top: 3em; left: 1em; } #b2 { top: 6em; left: 2em; } #b3 { top: 5em; left: 3em; } #b1 { z-index: 101; } .popup { z-index: 200; position: absolute; left: 3em; top: -1em; width: 8em; height: 8em; background-color: grey; }

 <div class="container"> <div class="foo" id="b0"> <span>absolute box b0</span> </div> <div class="foo" id="b1"> <span>absolute box b1</span> <div class="popup"> popup box inside b1 </div> </div> <div class="foo" id="b2"> <span>absolute box b2</span> </div> <div class="foo" id="b3"> <span>absolute box b3</span> </div> </div>

我把这个固定在这个小提琴上让你理解。

Answer 2

核心思想是元素以 DOM 树顺序（深度优先）递归呈现：

1. 元素本身的背景和边框
2. 定位为负 zindex 的孩子
3. 非定位内容
4. 具有零（或缺失）zindex 的定位子项
5. 具有正 zindex 的定位儿童

这意味着父项的树序优先于其子项的 z-index。

在所讨论的示例中，所有foo框都具有相等的 zindex=100 并且在第 3 步是按树顺序排列的。弹出窗口的一些“叔叔”在父母之后呈现。

参考：

https://www.w3.org/TR/CSS22/visuren.html#propdef-z-index https://www.w3.org/TR/CSS22/zindex.html