问在CSS2.1中，如果父母建立了一个堆叠上下文，为什么孩子的文本可以放在父文本下面，而背景色却不能呢？

EN

CSS2.1 州

每个框属于一个堆叠上下文。给定堆叠上下文中的每个定位框都有一个整数堆栈级别，这是它在z轴相对其他堆栈级别上的位置，在相同的堆叠上下文中。堆栈级别较高的框总是在堆栈级别较低的框前面格式化。框可能具有负堆栈级别。在堆叠上下文中具有相同堆栈级别的框根据文档树顺序从后向前堆叠。 在每个堆叠上下文中，以下各层是按前后顺序绘制的：

1. 构成堆叠上下文的元素的背景和边框。
2. 具有负堆栈级别(最负的第一层)的子堆栈上下文。
3. 在流，非内联水平，非定位的后代。
4. 未定位的浮标。
5. 流内、内联级、非定位子程序，包括内联表和内联块.
6. 堆栈级别0的子堆栈上下文和堆栈级别0的定位后代。
7. 具有正堆栈级别的子堆栈上下文(最不肯定的优先)。

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

然后将父元素的文本绘制在子元素的上方，如第5项中所示。

不可能让堆叠的背景完全凌驾于其后代之上--无论你做什么，它的背景和边框都会被画在最底层。由于一个方框一次只能出现在一个堆叠上下文中(堆叠上下文可以嵌套，但在这里不相关)，如果您希望这些元素完全位于父堆栈上下文中，并且允许父元素为其其他内容建立自己的堆叠上下文，则必须将这些元素移出父堆栈上下文。例如，您可以将它们移到父级之外，从而使它们成为兄弟姐妹，共享相同的堆叠上下文，在您的情况下是根堆叠上下文。

非常有趣的问题：

• 为什么会有这样的行为？ 根据这些定义， http://www.w3.org/TR/CSS21/visuren.html#z-index和 http://www.w3.org/TR/CSS21/zindex.html 如果您遵循这些步骤，就会按照定义呈现它。

​

(图片来源于http://www.vanseodesign.com/css/css-stack-z-index/)

在每个堆叠上下文中，以下各层是按前后顺序绘制的： 1-构成堆叠上下文的元素的背景和边界。2-具有负堆栈级别的子堆栈上下文(最负的第一层)。3-在流，非直线水平，非定位后代。4-非定位浮标。5-流内，内联级，非定位的后代，包括内联表和内联块.6-具有堆栈级别0的子堆栈上下文和具有堆栈级别0的定位后代。7-具有正堆栈级别的子堆栈上下文(最不肯定的优先)。

• ，当父母建立一个堆叠的上下文时，如何使父母完全超越孩子，即使是在背景上？ 如果标准浏览器遵循定义，则不能对堆叠上下文及其子程序执行此操作，因为这将与定义发生冲突。

您的文本节点：

Hello Chip Hello Chip Hello Chip Hello Chip

还获得了一个堆叠的上下文：

1. #chip01：imaginary-stack-context: 0
2. #chip01 "Hello Chip..." - imaginary-stack-context: 1
3. #chip02 - imaginary-stack-context: 0
4. #chip03 - imaginary-stack-context: 0 (因为有z-index: -1，所以在所有其他元素后面都有positive / auto z-索引)。)

CSS2.1规范已经由@BoltClock提供。

​

​