浮动元素是否像定位元素一样创建单独的堆叠上下文？ [英] Do floated elements create a separate stacking context like positioned ones do?

问题描述

最近，我点燃了 p>

对此的解释是浏览器以特定顺序绘制元素，这是基于所谓的堆叠顺序：

因此，对于布局中的根元素每一个定位的元素，浏览器都会创建这样的堆叠顺序，然后将所有这些订单都画出来，对不起双方的相应订单。所以这就是为什么 inline元素和文本（创建行内框的元素和文本）被绘制在块级元素之上，即使这些块元素出现在文档的后面，就像我上面的jsfiddle一样。 b
$ b

---

所以问题本身。

我仍然无法找到答案，为什么这些内联框，如果它们是创建的，则内联元素和浮动元素内的文本不会根据上面堆叠顺序的方案与浮动元素之外的其他内联框绘制，如

在这里，您可以清楚地看到文档中第一个div没有浮动的文本在跨度的黄色背景之上（之后）绘制，而跨度是内联元素并根据上面的堆叠顺序的图像应该在浮动容器（其背景和边框）之后绘制。

所以，有没有人对此有一个经过验证的解释？我猜想浮动元素会像自己的堆叠顺序一样创建类似于定位元素的堆叠顺序，但我还没有在Web中发现任何提及。 解决方案

CSS2.1 指定绘画顺序如下所示：

在每个堆叠环境中，以下图层按照先后顺序绘制：

1. 构成堆叠上下文的元素的背景和边界。
   
2. 负堆栈级别的子堆叠上下文负数第一）


3. 非流水线非内联级别的非定位后裔。
   
4. 。


5. 包含内联表格和内嵌块的内嵌式，内嵌式，无位置的后代。 $ b
6. 子级堆叠上下文
   
7. 具有积极堆栈级别的子堆叠上下文（最不积极的优先级）。

浮动不会自行建立堆叠上下文。他们只会这样做，如果他们的位置和有一个不是自动的z-index（不包括元素可以这么做的许多其他方式中的任何一种）。否则，它们将与其他元素（包括内联）一起参与相同的堆叠上下文，并带有以下警告（来自上面的相同链接）：

在每个堆栈上下文中，堆栈级别为0（在层6中），非定位浮点数（第4层），嵌入块（第5层）和行内表（第5层）就好像这些元素本身产生了新的堆叠上下文，除了它们的定位后代和任何可能的子堆叠上下文参与了当前的堆叠上下文。

由于您的小提琴中的所有元素都参与了相同的堆叠环境，并且您的浮动元素未定位（＃4），所以溢出div（＃5）的内联内容在上方绘制 >浮动元素和的后代元素，即使浮动元素后来以源顺序出现。 背景 >的溢出然而，由于浮动的背景被认为是浮动本身的一部分，所以根据上面的第二个引用，浮动div（＃1）被绘制在浮动的下方。您可以通过给予浮动利差来查看：

#floated {
background-color：pink;
width：300px;
float：left;
margin-top：-50px;
}


Recently I lit upon an interesting article about the CSS z-index property. I found it because I was seeking for an answer about why overflowed text from a preceding div was displayed above the background of a following div but not above the background of a span in the following div, like here (jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#non-floated {
  background-color: pink;
  width: 300px;
}
#non-floated span {
  background-color: yellow;
}

The explanation for this is the fact that a browser draws elements in a specific order, which is based on the so-called stacking order:

So for the root-element in a layout and every positioned element, the browser creates such stacking order and then draws all these orders in, sorry for the pun, the respective order.

So this is why inline elements and text (those which create inline boxes) are drawn above block level elements, even if these block elements appear later in a document, like in my jsfiddle above.

---

So the question itself.

I still cannot find an answer why these inline boxes, if they are created, for inline elements and text inside a floated element are not drawn with other inline boxes which are outside the floated element according the the scheme of the stacking order above, like here (jsfiddle):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#floated {
  background-color: pink;
  width: 300px;
  float: left;
}
#floated span {
  background-color: yellow;
}

Here you can clearly see, that the text from the first div in the document, which is not floated, is drawn above (after) the span's yellow background, while the span is an inline element and according to the image of the stacking order above is supposed to be drawn after the floated container (its background and borders).

So does anyone have an proven explanation for this? I suppose that floated elements create something like their own stacking order, like positioned elements do, but I have not found any mention of this in the web yet.

解决方案

CSS2.1 specifies the painting order of elements as follows:

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

Floats do not establish stacking contexts on their own. They will only do so if they are positioned and have a z-index that is not auto (not counting any of the numerous other ways an element may do so). Otherwise, they participate in the same stacking context as other elements, including inlines, with the following caveat (from the same link above):

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.

Since all elements in your fiddle are participating in the same stacking context, and your floating element is not positioned (#4), the inline contents of the overflowing div (#5) are painted above the floating element and its descendant elements, even though the floating element appears later in source order.

The background of the overflowing div (#1) is painted below that of the float, however, because the background of the float is considered part of the float itself in accordance with the second quote above. You can see this by giving the float a negative margin:

#floated {
  background-color: pink;
  width: 300px;
  float: left;
  margin-top: -50px;
}

这篇关于浮动元素是否像定位元素一样创建单独的堆叠上下文？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！