css "fixed" child element positions relative to parent element not to the viewport, why? [duplicate]

FWIW, when I ran into this, the problem turned out to be a parent div with -webkit-transform: translate3d(0, 0, 0) in its CSS. Apparently, this is a known source of potential mayhem in child elements with position: fixed.

For what I was trying to do (turning fixed on and off as a way of sticking a key nav element to the top of the page as it scrolled by), the solution was to append it to the page body element when it was time to hold it in place and sticking it back in its wrapper div when it wasn't. No idea if any of this would have helped the OP, but if you're chasing this bug yourself, worth looking into.

Remove the transform property from the parent of the fixed element.

For some reason this causes the fixed element to become relative to the parent instead of the document.

Codepen example.

In case there are other people who have been running into this mess and don't have a transform property, the value of a properly that has blur() also causes this to mess up.

This was such a pain point for me. Too much time wasted of figuring this one out. :(

In my case, the parent element doesn't have a transform property but filter: drop-shadow(...) which caused the same problem. Removing the filter solved the problem.