最近我点了一篇关于CSS z-index属性的有趣文章.我发现它是因为我正在寻找一个答案,为什么来自前一个div的溢出文本显示在后面div的背景上方但不在下面div中的span的背景之上,就像这里(jsfiddle):
#overflowed {
background-color: green;
width: 300px;
height: 100px;
}
#non-floated {
background-color: pink;
width: 300px;
}
#non-floated span {
background-color: yellow;
}
对此的解释是浏览器以特定顺序绘制元素,这是基于所谓的堆叠顺序:
因此,对于布局中的根元素和每个定位元素,浏览器创建这样的堆叠顺序,然后绘制所有这些订单,对不起双关语,相应的顺序.
所以这就是内联元素和文本(创建内联框的那些)被绘制在块级元素之上的原因,即使这些块元素稍后出现在文档中,就像我上面的jsfiddle一样.
所以问题本身.
我仍然无法找到答案为什么这些内联框,如果它们被创建,内联元素和浮动元素内的文本不是根据上面的堆叠顺序的方案与浮动元素之外的其他内联框绘制,就像这里(jsfiddle):
#overflowed {
background-color: green;
width: 300px;
height: 100px;
}
#floated {
background-color: pink;
width: 300px;
float: left;
}
#floated span {
background-color: yellow;
}
在这里你可以清楚地看到,文档中第一个div的文本(未浮动)是在span的黄色背景上方(之后)绘制的,而span是内联元素,并且根据上面的堆叠顺序的图像应该在浮动容器(其背景和边框)之后绘制.
那么有人对此有一个可靠的解释吗？我认为浮动元素可以创建类似于自己的堆叠顺序的东西,就像定位元素那样,但我还没有在网上找到任何提及.
CSS2.1指定元素的绘制顺序如下:
在每个堆叠上下文中,以下层按从前到后的顺序绘制:
形成堆叠背景的元素的背景和边界.
子堆叠上下文与负堆栈级别(最负面的).
流入的,非内联级别,非定位后代.
未定位的花车.
流入的,内联级的,未定位的后代,包括内联表和内联块.
堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代.
堆叠具有正堆栈级别的子堆栈(最少积极的第一个).
浮动不会自己建立堆叠上下文.只有当它们被定位并且 z-index不是auto 时才会这样做(不计算元素可能执行的任何其他方式).否则,它们与其他元素(包括内联)一起参与相同的堆叠上下文,并带有以下警告(来自上面的相同链接):
在每个堆叠上下文中,堆栈级别为0(在第6层中)的定位元素,非定位浮点(第4层),内联块(第5层)和内联表(第5层)被绘制为好像这些元素本身生成了新元素堆叠上下文,除了它们定位的后代和任何可能的子堆叠上下文参与当前的堆叠上下文.
由于您提琴的所有元素都参与了同一堆叠内容,和你的浮动元素没有被定位(#4),溢出的div的在线内容(#5)被漆成上述浮动元素和它的后代元素,即使浮动元素稍后以源顺序出现.
溢出div(#1)的背景绘制在浮子的下方,但是,因为根据上面的第二个引用,浮子的背景被认为是浮子本身的一部分.你可以通过给浮点数一个负余量看到这个:
#floated {
background-color: pink;
width: 300px;
float: left;
margin-top: -50px;
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 