[英]z-index on absolutely positioned nested elements
I have some absolutely positioned boxes.我有一些绝对定位的盒子。 One of them has nested popup, larger then box.
其中之一具有嵌套弹出窗口,大于框。 I want to make popup in front of all the boxes.
我想在所有盒子前面弹出。
Setting z-index: 100
on boxes and z-index: 200
on popup does not help.设置
z-index: 100
on box 和z-index: 200
on popup 没有帮助。 Boxes going in doc-order after box with popup appear to be over popup.在带有弹出框的框之后按文档顺序排列的框似乎超过了弹出框。 What do I miss about z-indices?
我想念 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>
You need to look at https://css-tricks.com/almanac/properties/z/z-index/
for a quick understanding of all this.您需要查看
https://css-tricks.com/almanac/properties/z/z-index/
以快速了解所有这些。 Especially on the part where it says:特别是在它说的部分:
Also note that nesting plays a big role.
另请注意,嵌套起着重要作用。 If an element B sits on top of element A, a child element of element A can never be higher than element B.
如果元素 B 位于元素 A 的顶部,则元素 A 的子元素永远不会高于元素 B。
What you did there was get children from lower elements and try to get them above children of higher elements.您在那里所做的是从较低元素中获取子元素,并尝试将它们置于较高元素的子元素之上。
All you needed to do was get the #b1 box on z-index 101:您需要做的就是在 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>
I have this fixed on this fiddle for you to understand.我把这个固定在这个小提琴上让你理解。
The core idea is that elements are rendered recursively in DOM tree-order (depth-first):核心思想是元素以 DOM 树顺序(深度优先)递归呈现:
This means that tree-order of parents has a priority over z-index of their children.这意味着父项的树序优先于其子项的 z-index。
In example in question all the foo
boxes have equal zindex=100 and was tree-ordered at step 3. Some "uncles" of popup are rendered after parents.在所讨论的示例中,所有
foo
框都具有相等的 zindex=100 并且在第 3 步是按树顺序排列的。弹出窗口的一些“叔叔”在父母之后呈现。
References:参考:
https://www.w3.org/TR/CSS22/visuren.html#propdef-z-index https://www.w3.org/TR/CSS22/zindex.html https://www.w3.org/TR/CSS22/visuren.html#propdef-z-index https://www.w3.org/TR/CSS22/zindex.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.