position:fixed doesn't work inside cdk-virtual-scroll-viewport

Question

HTML element with position:fixed doesn't work inside cdk-virtual-scroll-viewport. Below style should put the element at the page top left corner, but this class doesn't apply to elements inside cdk-virtual-scroll-viewport.

.fixed-div {position: fixed;top: 0;left: 0;}

for some reason above class to elements inside cdk-virtual-scroll-viewport will keep the elements at the top left corner of cdk-virtual-scroll-viewport.

link to reproduce https://stackblitz.com/edit/angular-mvf6dp

How to force elements with position:fixed inside cdk-virtual-scroll-viewport to display the relative to viewport ?

Answer 1

This is because of the css transform property on the div.cdk-virtual-scroll-content-wrapper element. The transform property makes and child that is position fixed treat that parent as the containing block rather than the body of the page.

See here for details https://developer.mozilla.org/en-US/docs/Web/CSS/position

Still trying to figure out how to deal with this myself.