我试图了解 z-index 背后的规则以及它如何与溢出属性交互。
我有这个 html:
<body>
<div class="cell">
Here is some text to keep things interesting
<div class="boxy"></div>
</div>
</body>
还有这个 CSS:
.boxy {
position: absolute;
z-index: 9999;
top:70px;
width: 50px;
height: 50px;
background: #0FF;
}
.cell {
border: 2px solid #F00;
position: relative;
/* comment these two lines out and the box appears */
/* or change them both to 'visible' */
/* changing only one of them to 'visible' does not work */
overflow-y: auto;
overflow-x: auto;
}
我预计青色框会出现，即使它超出了 div.cell 的大小，因为它的 z-index 和它的位置已设置。
但是，使青色框出现的唯一方法是注释掉 overflow-x 和 -y 行。
我的问题是:如何让青色框出现在屏幕上，同时保持溢出为隐藏或自动？但更重要的是，我想了解为什么会发生这种情况。这里应用的 css 和布局规则是什么？
See my Plunkr.这个示例当然是我实际使用的 HTML/CSS 的简化版本。
编辑
下面的答案似乎有些困惑，因为我解释得不够好。如果将两条溢出线注释掉，可以看到出现了青色框。它出现在 .cell 的边界之外。为什么会这样？如何让青色框出现，同时仍然 overflow hidden 和 z-index？
最佳答案
青色框仅在 overflow-x 和 overflow-y 可见时出现，否则消失的原因很简单，因为青色框溢出了单元格框. overflow: visible 简单的意思是“绘制这个框，即使它溢出了它的包含 block ”——单元框是青色框的包含 block ，因为它的 position 是相对的。 overflow 的任何其他值都会导致溢出的内容从 View 中剪裁掉。这里没有什么特别的；特别是，z-index 是完全不相关的，并且没有问题标题所暗示的这种交互(并且真的没有理由将它设置为如此巨大的数字，除非您担心脚本将其他元素注入(inject)单元格).
在单元格有不可见的溢出时允许青色框出现的唯一方法是从单元格中删除 position: relative 并将该声明应用于单元格的父级(在你的例子，它是 body )。像这样:
body {
position: relative;
}
.boxy {
position: absolute;
z-index: 9999;
top: 70px;
width: 50px;
height: 50px;
background: #0FF;
}
.cell {
border: 2px solid #F00;
overflow: auto;
}<div class="cell">
Here is some text to keep things interesting
<div class="boxy"></div>
</div>关于css - 为什么 overflow 与 z-index 交互？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37914310/