position: fixed не работает внутри cdk-virtual-scroll-viewport

HTML-элемент с position: fixed не работает внутри cdk-virtual-scroll-viewport. Стиль ниже должен помещать элемент в верхний левый угол страницы, но этот класс не применяется к элементам внутри cdk-virtual-scroll-viewport.

.fixed-div {позиция: фиксированная; вверху: 0; слева: 0;}

по какой-то причине указанный выше класс для элементов внутри cdk-virtual-scroll-viewport сохранит элементы в верхнем левом углу cdk-virtual-scroll-viewport.

ссылка для воспроизведения https://stackblitz.com/edit/angular-mvf6dp

Как заставить элементы с position: fixed внутри cdk-virtual-scroll-viewport отображать относительно области просмотра?


person V_R    schedule 29.08.2020    source источник


Ответы (1)


Это из-за свойства преобразования css в элементе div.cdk-virtual-scroll-content-wrapper. Свойство transform заставляет дочерний элемент с фиксированной позицией рассматривать этот родительский элемент как содержащий блок, а не тело страницы.

Подробнее см. Здесь https://developer.mozilla.org/en-US/docs/Web/CSS/position

Я все еще пытаюсь понять, как с этим справиться.

person Ayehavgunne    schedule 05.05.2021