By default position: fixed elements are positioned relative to the viewport which is useful for creating "visually hidden" classes. However if a parent of a position: fixed element has a transform then that ancestor is the new context. The spec states it this way:
When an ancestor has the transform property set to something different than none then this ancestor is used as container instead of the viewport
See the Pen gLZmRq by Adam Simpson (@asimpson) on CodePen.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>