Display “fixed” elements still scrolling, not fixed to page (also, if z-index not working properly)
I had an interesting problem where I set an image's CSS rules to display:fixed and it still scrolled with the page. Here's what I discovered:
In CSS, display:fixed means fixed with regard to the nearest ancestor stacking context, not necessarily to the page coordinates. You can reset the stacking context by adding a transform, will-change, or other attributes (list provided below) to an element. If an ancestor element resets the stacking context, any descendant of it with display:fixed will stay fixed with regard to it, but if it scrolls with the page, will scroll too.
Ditto for the CSS attribute z-index. A higher z-index is only in front of objects in its stacking context. A new stacking context, lower down on the page, can contain elements with a lower z-index but that nonetheless appear in front of it visually, because they're not in the same stacking context.
Josh Comeau's site…

