#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的文本被绘制在跨度的黄色背景之上(之后),而跨度是一个内联元素,并且根据上面的堆叠顺序的图像应该是在浮动的容器(其背景和边界)之后绘制的.
有没有人有这个证明的解释？我想浮动的元素创建像自己的堆叠顺序,像定位元素,但我还没有在网络中没有提到这一点.
解决方法
Within each stacking context,the following layers are painted in back-to-front order:
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow,non-inline-level,non-positioned descendants.
- the non-positioned floats.
- the in-flow,inline-level,non-positioned descendants,including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- the child stacking contexts with positive stack levels (least positive first).
浮动不会自己建立堆叠上下文.它们只有在定位并且z指数不是auto(不计any of the numerous other ways an element may do so)时才这样做.否则,他们参与与其他要素(包括内联)相同的堆叠上下文,并附带以下注意事项(来自上述相同的链接)：
Within each stacking context,positioned elements with stack level 0 (in layer 6),non-positioned floats (layer 4),inline blocks (layer 5),and inline tables (layer 5),are painted as if those elements themselves generated new stacking contexts,except that their positioned descendants and any would-be child stacking contexts take part in the current stacking context.
由于您的小提琴中的所有元素都参与到相同的堆叠上下文中,并且您的浮动元素未定位(#4),溢出的div(#5)的内联内容将被绘在浮动元素及其后代元素的上方,即使浮动元素稍后以源顺序出现.
溢出的div(#1)的背景画在浮点数的下面,但是,因为float的背景根据上面的第二个引用被认为是float的一部分.你可以在giving the float a negative margin看到这个：
#floated {
background-color: pink;
width: 300px;
float: left;
margin-top: -50px;
}
