Search code examples
z-indexastrojsview-transitions-api

Astro. Keep an element handled with view transitions in the background

I have a navigation flap. Clicking on a link triggers the transition and the element in transit is placed above the flap, as if it had a higher z-index, but it doesn't.

enter image description here

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

I can't determine in the inspector why this is happening.

How can I prevent the transitioning element from being placed above the others?

Solution

  • For anyone else that runs into this issue, here is a re-post of an answer from Discord:

    @martrapp - Hi @aitor, I'm afraid you can't. The browser puts the elements of a transition group in a new layer the sits above all others on the page. From here:

    The ::view-transition pseudo-element generates a new stacking context, called the view transition layer, which paints after all other content of the document (including any content rendered in the top layer), after any filters and effects that are applied to such content.

    @martrapp - You may try to also put the flap into a transition group with transition:animate="none". That way it should also be part of the new stacking context, but i do have no idea whether you can force it above the main transition in that way.