为什么溢出会与z-index交互? [英] Why is overflow interacting with z-index?
问题描述
我试图了解z-index背后的规则以及z-index与溢出属性的相互作用.
I am trying to understand the rules behind z-index and how it interacts with the overflow property.
我有这个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索引和位置也已设置.
I would have expected that the cyan box appears even though it is out of the size of the div.cell because its z-index and its position are set.
但是，使青色框出现的唯一方法是注释掉overflow-x和-y行.
However, the only way to make the cyan box appear is to comment out the overflow-x and -y lines.
我的问题是:如何使蓝绿色框出现在屏幕上，同时保持溢出为隐藏状态或自动状态?但更重要的是，我希望了解为什么.此处应用了哪些CSS和布局规则?
My question is: How can I make the cyan box appear on the screen while keeping the overflow as either hidden or auto? But more importantly, I'm looking to understand why this is happening. What are the css and layout rules being applied here?
请参阅我的Plunkr.这个示例当然是我实际上正在使用的HTML/CSS.
See my Plunkr. This example, is of course a much simplified version of the HTML/CSS I am actually working with.
编辑
由于我的解释不够充分，以下答案似乎有些混乱.如果注释掉两条溢出线，则可以看到出现了青色框.它出现在.cell的边界之外.为什么会这样?如何在仍然隐藏上溢和z-index的同时显示青色框?
EDIT
There seems to be some confusion in the answers below because I didn't explain things well enough. If you comment the two overflow lines out, you can see that the cyan box appears. It appears outside of the border of .cell. Why does this happen? How can I make the cyan box appear, while still hiding overflow and z-index?
推荐答案
仅当overflow-x和overflow-y可见时才显示青色框，否则消失的原因仅是因为青色框溢出了单元格框. overflow: visible只是意味着即使该框溢出其容纳块也要绘制此框" —单元格框是青色框的包含块，因为其position是相对的. overflow的任何其他值都会导致溢出的内容从视图中被裁剪.这里没有什么特别的事情.特别是z-index完全无关紧要，并且没有问题标题所暗示的交互作用(除非您担心脚本会将其他元素注入到单元格中，否则实际上没有理由将z-index设置为如此大的数目. ).
The reason the cyan box appears only when overflow-x and overflow-y are visible, and disappears otherwise, is simply because the cyan box is overflowing the cell box. overflow: visible simply means "paint this box even if it is overflowing its containing block" — the cell box is the containing block of the cyan box because its position is relative. Any other values of overflow cause overflowing content to be clipped from view. There is nothing special going on here; in particular, the z-index is completely irrelevant and there is no such interaction as the question title alludes to (and there really is no reason to set it to such a huge number unless you're worried about scripts injecting other elements into the cell).
当单元格出现不可见的溢出时，允许青色框出现的唯一方法是从单元格中删除position: relative并将该声明应用于单元格的父级(在您的示例中为主体) .像这样:
The only way to allow the cyan box to appear while the cell has a non-visible overflow is to remove position: relative from the cell and apply that declaration to the parent of the cell (in your example, it's the body). Like this:
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>
这篇关于为什么溢出会与z-index交互?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
