"Position: Fixed" child does not work when parent has transform set

Step 1: add div and set 3d perspective
→ Step 2: add child and set transform on z-axis
→ → Step 3: add child and set it to position fixed

When triggering the fixed element with a click interaction, the element behaves as “position: absolute” temporarily.

I don’t have snapshot abilities but would otherwise provide a snap :slight_smile:

not quite sure what you mean…

Take a look at this


@thewonglv it looks like this is the expected behavior of elements within a parent element that has perspective set, as when you set parent perspective on an element, it effectively creates a Stacking Context (so it becomes the containing block to the child elements, like the body window is to all first-child elements).

This article has some great information regarding Stacking Contexts: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Depending on the specific circumstance there are different work arounds to put in place, but without more information or a Read-Only link to a site it’s difficult to point you in the right direction.

CC @danro to double check or if you have any additional information to provide, I believe this is the expected behavior but may be mistaken.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.