But the position fixed is a little bit trickier than just positioning the element according to the window.
It choses a containing block based on some criteria. I had a problem when positioning a popover inside a dialog because both were fixed. The dialog was fixed with the window but the popover was fixed with the dialog
The MDN documentation really helped me to understand what was happening.
fixed
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Nice article!
But the position fixed is a little bit trickier than just positioning the element according to the window.
It choses a containing block based on some criteria. I had a problem when positioning a popover inside a dialog because both were fixed. The dialog was fixed with the window but the popover was fixed with the dialog
The MDN documentation really helped me to understand what was happening.
developer.mozilla.org/en-US/docs/W...
fixed
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.