I’ve been using CSS view transitions recently and really enjoying the simplicty they bring for animating elements that move on the page (think reordering elements or adding and removing to a list).

I wanted to do a quick post on an issue I came across when you use view transitions and sticky elements on the page. I found that my transitions were popping above the the sticky element during the transition, and then popping back below when the animation finished.

The solution I found was to add a view transition name to the sticky element, and then target that view transition in CSS and set the z-index above the other transition elements.