为何含view-transition-name的元素会渲染在position:fixed元素之上？

示例代码 #

CSS #

div {
  width: 50px;
  height: 50px;
  border: solid 2px black;
}

.fixed {
  position: fixed;
  top: 25px;
  left: 25px;
  background-color: red;
}

.named {
  background-color: green;
  view-transition-name: something;
}

HTML #

<div class="fixed"></div>
<div class="named"></div>

疑问点 #

我了解的规则是：在同一堆叠上下文中，定位元素会渲染在非定位元素之上。

根据规范描述：

在视图过渡期间被捕获的元素，或任何时候view-transition-name计算值不为none的元素：

• 形成堆叠上下文。
• 在3D变换中被扁平化。
• 形成背景根。

规范里没提到带有view-transition-name的元素会变成定位元素，但上面的示例里绿色元素（带view-transition-name）却渲染在红色固定定位元素之上，这让我搞不懂原因。

解答 #

这是因为堆叠上下文的层级排序规则：当元素各自创建独立的堆叠上下文时，它们的渲染层级并非单纯由是否为定位元素决定，而是由堆叠上下文的创建顺序（文档流中的出现顺序）主导。

具体来说：

• 固定定位元素会创建自己的堆叠上下文
• view-transition-name不为none的元素同样会创建独立的堆叠上下文

在你的示例中，绿色的.named元素在HTML结构中晚于红色.fixed元素出现，后创建的堆叠上下文层级更高，因此会覆盖在固定定位元素之上。

如果调整HTML结构，将.named放在.fixed之前，红色固定元素就会覆盖绿色元素，这也能验证这个逻辑。

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