CSS Stacking Context定义及浮动渲染异常的技术咨询

问题1：关于堆叠上下文的原子化特性 #

你的理解非常准确！当一个元素生成新的堆叠上下文时：

• 这个元素本身和它的所有后代元素，都会严格遵循这个新上下文内部的堆叠层级规则来排序绘制，后代的堆叠行为不会跳出这个上下文的边界。
• 整个新的堆叠上下文会作为一个不可拆分的原子单元，在它的父堆叠上下文（比如页面的根堆叠上下文）中，根据自身的堆叠层级（比如z-index值，或者触发上下文的规则对应的层级）参与整体的堆叠排序。举个例子，如果这个子上下文的堆叠层级是0，它就会被放在父上下文的第6层；如果是正数值，就归入第7层，完全符合你给出的规范描述。

规范里提到“子stacking context”会作为单独的层级（第2、6、7层）被绘制，这正好印证了这种原子化特性——父上下文不会关心子上下文内部的元素顺序，只看这个子单元整体的层级位置。

问题2：Float元素与块级盒子的视觉重叠问题 #

这个现象其实完全符合CSS2.1的堆叠规范，核心要区分堆叠层级和文档流布局两个概念：

1. 各元素的堆叠层级对应：

   • .new是正常流中的块级非定位元素，属于规范里的第3层（从后到前绘制，也就是视觉上在下方）。
   • .float是非定位float元素，属于第4层（在第3层上方绘制）。
   • .old是正常流中的行内非定位元素，属于第5层（视觉上在最上方）。

2. 视觉现象的具体原因：

   • float元素的核心特性是脱离正常流，但会占据正常流内容的布局空间：.new作为块级元素，它的内容会被.float挤到右侧，不会和.float的文字重叠；但.new的背景会填充整个容器的宽度，自然会延伸到.float占据的左侧区域。
   • 按照堆叠顺序，第4层的.float背景会覆盖第3层的.new背景（这就是你看到的“背景层覆盖其上”）；而.new的内容因为被布局挤到了.float的右侧，没有和.float的内容重叠，所以看起来“float元素没在块级盒子内容上方”——但这不是堆叠顺序的问题，是float的布局特性导致的内容无重叠。

你可以做个小实验验证：给.new加上margin-left: -100px，让它的内容和.float重叠，这时你会看到.new的文字会出现在.float文字的下方，完全符合第3层在第4层下方的规范。

内容的提问来源于stack exchange，提问作者Magnus