絕對定位嵌套元素上的 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