为何container-type: inline-size会破坏堆叠与溢出规则？

原因分析 #

当给.following元素设置container-type: inline-size时，这个元素会自动创建堆叠上下文（Stacking Context），同时成为容器查询的包含块。

默认状态下，.following没有堆叠上下文，文档流中溢出的文本（来自.overflowing内的<p>）会按正常堆叠顺序显示在.following上方。但一旦.following拥有堆叠上下文，它的堆叠层级会被提升，并且形成一个独立的堆叠“容器”——外部的溢出内容会被这个容器遮挡，因为堆叠上下文内部的元素和外部元素的堆叠顺序相互独立，且带堆叠上下文的元素优先级更高。

再加上.container设置了固定高度200px，导致.overflowing内的文本溢出到容器外，这部分溢出内容没有自己的堆叠上下文，自然会被后面带堆叠上下文的.following覆盖。

可行解决办法 #

• 提升溢出内容的堆叠层级：给.overflowing（或其内部的<p>）设置position: relative和z-index，让它也建立自己的堆叠上下文，从而优先于.following显示：

.overflowing {
  margin: 2rem;
  width: 80%;
  background-color: blue;
  position: relative;
  z-index: 1;
}

• 移除不必要的容器类型设置：如果不需要在.following中使用容器查询，直接删掉container-type: inline-size，就能恢复原本的堆叠规则。

• 调整容器的溢出行为：要么给.container去掉固定高度，让它自适应内容高度，避免文本溢出；要么明确设置.container的overflow: visible（默认值，但可确保不会被其他样式覆盖）。

内容的提问来源于stack exchange，提问作者Luke A. Leber