In CSS, many position/layout properties are context-aware. For example, position: absolute; only works if the desired parent has position: related/absolute/fixed;. However, position: fixed; is very simple. It is always related to window, barely affected by parent container. But, I stuck in this small issue:
This is strange, I have position: fixed; but why it doesn’t work?
So I checked its parent elements one by one and found the modal library left a transform: scale(1);. It doesn’t make any visual difference and seems a side effect of animation. In browsers’ implementation, even if scale(1) and translateX(0) don’t make any sense, the transform property will recreate a coordinate system. As result, position:fixed of inner elements will not be related to window, but the transform element.
The solution is simple, change transform: scale(1) to transform: unset. In practice, avoid using transform in large containers, like a sidebar or modal. If you need it, make sure here is no position: fixed inside, such as some popups.
Leave a Reply