Skip to content

position: fixed breaks if any of its ancestors uses transform

Published on in CSS and CSS for JS Devs course

Or perspective or filter. This can easily cause confusing bugs.

position: fixed works mostly the same way as position: absolute does.

  • position: absolute is positioned relative to its closest positioned ancestor.
  • position: fixed is positioned relative to the viewport.

However, in the case of position: fixed, if any of the element's ancestors (i.e. parent or any of the grandparents) has a transform property set to something else than none, the element's positioning "breaks." The fixed element is then positioned relative to that ancestor, i.e. position: fixed behaves like position: absolute.

This can easily cause confusing bugs.

I learned this from Josh W Comeau's CSS for JavaScript developers course (Module 2).

MDN's documentation on position: fixed mentions that the perspective and filter properties also break position: fixed, but "there are browser inconsistencies with perspective and filter contributing to containing block formation."