阿斯特罗。在后台保留使用视图转换处理的元素

Question

我有一个导航襟翼。单击链接会触发转换，并且传输中的元素会放置在翻盖上方，就好像它具有更高的 z-index，但事实并非如此。

<Flap /> // <---- absolute position and z-index = 50
<Header />
<main
    transition:animate={slide({ duration: "1s" })}
    class="z-0"
>
    <slot />
</main>

我无法在检查器中确定为什么会发生这种情况。

如何防止过渡元素放置在其他元素之上？

Answer 1

对于遇到此问题的其他人，这里是来自 Discord 的答案的重新发布：

@martrapp - 嗨@aitor，恐怕你不能。浏览器将过渡组的元素放置在位于页面上所有其他元素之上的新层中。从这里开始：

::view-transition 伪元素生成一个新的堆叠上下文，称为视图过渡层，它在应用任何滤镜和效果之后绘制文档的所有其他内容（包括顶层中渲染的任何内容）到这样的内容。

@martrapp - 您也可以尝试将襟翼放入过渡组中，并使用transition：animate =“none”。这样它也应该成为新的堆叠上下文的一部分，但我不知道是否可以以这种方式将其强制高于主转换。