我有一个包含 3 个 DIV 的简单页面:http://jsfiddle.net/AxX29/32/
使用 HTML:
<div id="content1">foo</div>
<div id="overlay"></div>
<div id="content2">bar</div>
和 CSS:
#overlay { width: 160px; height: 160px; background:yellow;
position: absolute; top:0; left: 0 }
我认为当没有元素定义任何 z-index
时,这意味着它们都是 auto
(如 jsfiddle 中的 JS 所示),所以这意味着有效的z-index
是0
,它们会按照DOM树遍历的顺序出现(可能是深度优先搜索),也就是说overlay
应该覆盖 content1
,而 content2
应该覆盖 overlay
,但事实证明,overlay
覆盖了content1
和 content2
,这是为什么呢?
(我知道我可以将 -1
的 z-index
放在 overlay
上,并使其低于 content1
和 content2
,但问题是,如果没有给出 z-index
,为什么 overlay
会同时覆盖 content1
和 content2
?)
最佳答案
给一个元素 position: absolute;
将它从正常的文档流中移除并将它放在其他元素之上。
您可以将 position: relative;
添加到父级 div 以使绝对定位元素相对于父级绝对定位,而不是绝对相对于整个文档定位。
编辑:正如您提到的,您已经知道,将 z-index
应用于 positioned
元素将改变它们的深度行为(堆栈上下文,技术上称为);应用 z-index: 100; position: absolute;
到你的第一个元素,例如,将它放在 position: absolute;
元素之上。
关于html - 在没有 z-index 的情况下,为什么早期的 sibling 会掩盖 DOM 中的后期 sibling ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23617526/