And*_*erg 15 css z-index overflow
我试图理解z-index背后的规则以及它如何与overflow属性交互.
我有这个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和布局规则是什么？
看我的Plunkr.这个例子当然是我实际使用的HTML/CSS的简化版本.
编辑
在下面的答案中似乎有些混乱,因为我没有很好地解释事情.如果您将两条溢出线注释掉,则可以看到出现青色框.它出现在边界之外.cell.为什么会这样？如何在显示青色框时仍然隐藏溢出和z-index？
Bol*_*ock 12
之所以会出现蓝绿色框,只有当overflow-x和overflow-y是可见的,否则消失了,很简单,因为青色箱溢出的电池箱.overflow: visible简单的意思是"即使它溢出其包含块也要画这个盒子" - 单元格框是青色盒子的包含块,因为它position是相对的.overflow导致溢出内容的任何其他值都会从视图中剪切掉.这里没什么特别的; 特别是,z-index是完全不相关的,并且没有问题标题所暗示的那种交互(并且除非你担心脚本将其他元素注入到单元格中,否则没有理由将它设置为如此庞大的数字).
在单元格具有不可见溢出时允许青色框出现的唯一方法是position: relative从单元格中删除并将该声明应用于单元格的父级(在您的示例中,它是正文).像这样:
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>| 归档时间： |
|
| 查看次数： |
16749 次 |
| 最近记录： |