在CSS 2.1中，如果父级建立堆叠上下文，为什么子级的文本会在父级下面，但背景颜色不能？ [英] In CSS 2.1, if a parent establish a stacking context, why can the children's text go under the parent but the background color cannot?

问题描述

这是一个高级的CSS问题。

在JSFiddle中（在Chrome 26.0，Firefox 20.0和IE 10上测试）

http://jsfiddle.net/4yRrm/10

父级建立堆叠上下文，子级的z-index高于父级，并覆盖父级，所以这些都很好。

但在 http://jsfiddle.net/4yRrm/11

>

现在孩子的z指数低于父母。现在，孩子们的文字会出现在父母的文字下方（您可以看到父母的蓝色文字覆盖儿童文字的黑色），但为什么孩子们的背景颜色会 父母？请用规格证明你的答案。为什么会有这样的行为 - 是否达到一定的目的？

因为它是父的背景是最低层，然后孩子们的背景，然后是孩子的文本，然后是父母的文本。所以父母的绘画是在极端 - 背景作为最低层，文本作为最高层，孩子们的内容夹在这两个极端之间。

相关的是：当父元素建立堆叠上下文时，如何使父元素高于子元素完全？请不要回答删除正面：相对或删除父母的 z-index：0 这将无法建立孩子的堆叠上下文。也就是说，父类必须具有相对，绝对的位置 $ c>或 fixed ，并且同时拥有整数的 z-index http://www.w3.org/TR/CSS21/visuren.html#layersrel =nofollow>州：

每个框属于一个堆栈上下文。给定堆叠上下文中的每个定位的框具有整数堆栈级别，其是其在z轴上相对于相同堆叠上下文中的其他堆栈级别的位置。具有较大堆栈级别的盒总是在具有较低堆栈级别的盒的前面格式化。框可能具有负堆叠级别。在堆叠上下文中具有相同堆栈级别的框根据文档树的顺序从后到前堆叠。

在每个堆叠上下文中，以下图层被回绘至前面的顺序：

1. 形成堆叠上下文的元素的背景和边框。





的子流程

4. 未定位的浮动广告素材。


5. li>子堆栈上下文与堆栈级别0和定位的后代与堆栈级别0。


6. 子堆栈上下文与积极的堆栈级别$ b

从项目1和2可以看出，子堆栈上下文具有负堆栈级别您的子元素）总是在当前堆叠上下文（即您的父元素）的背景上绘制。

然后，父元素的文本被绘制在子元素

不可能使堆叠上下文完全位于其任何后代之上 - 其背景和边框总是 >无论你做什么，都要画在最底部。因为框可以一次只出现在一个堆叠上下文中（堆叠上下文可以嵌套，但这里不相关），你必须将这些元素移出父堆叠上下文，如果你希望它们完全坐在父下，同时允许父节点为其它内容建立其自己的堆叠上下文。例如，您可以将它们移动到父代之外，以便它们成为兄弟，而共享相同的堆叠上下文，在您的情况下是根堆叠上下文。

This is an advanced CSS question.

In the JSFiddle: (as tested on Chrome 26.0, Firefox 20.0, and IE 10)

http://jsfiddle.net/4yRrm/10

The parent establishes a stacking context, and the children have higher z-index than the parent and cover the parent up, so that's all fine.

But what about in http://jsfiddle.net/4yRrm/11

Now the children have a lower z-index than the parent. The text of the children now go under that parent's text (as you can see the parent's text in blue color covering up the black color of the children's text), but why do the children's background color go above the parent instead? Please substantiate your answer with the spec. Why is there such a behavior -- does that achieve a certain purpose?

As it is, the background of the parent is the lowest layer, and then the children's background, and then the children's text, and then the parent's text. So the parent's painting are at the "extreme end" -- the background as the lowest layer, and the text as the topmost layer, and the children's content are "sandwiched" inside these two extremes.

And related is: how do you make the parent go above the children completely even for the backgrounds, when the parent establishes a stacking context? Please do not answer to remove the positive: relative or to remove the z-index: 0 of the parent, as that will fail to establish a stacking context for the children. That is, the parents MUST have a position of either relative, absolute, or fixed, and at the same time, have a z-index of an integer (and cannot be auto).

解决方案

CSS2.1 states:

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

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).

As you can see from items 1 and 2, the child stacking contexts with negative stack levels (i.e. your child elements) are always painted above the background of the current stacking context (i.e. your parent element).

The text of the parent element is then painted above the child elements, as in item 5.

It is not possible to make a stacking context sit completely above any of its descendants — its background and borders will always be painted at the very bottom no matter what you do. Since a box may only appear in one stacking context at a time (stacking contexts can be nested but that's not relevant here), you'll have to move those elements out of the parent stacking context if you want them to sit completely under the parent, while allowing the parent to establish its own stacking context for its other contents. For example, you can move them just outside the parent such that they become siblings instead, sharing the same stacking context which in your case is the root stacking context.

这篇关于在CSS 2.1中，如果父级建立堆叠上下文，为什么子级的文本会在父级下面，但背景颜色不能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！