position:fixed 在 cdk-virtual-scroll-viewport 中不起作用答案

【问题标题】：position:fixed doesn't work inside cdk-virtual-scroll-viewportposition:fixed 在 cdk-virtual-scroll-viewport 中不起作用
【发布时间】：2020-12-18 01:57:01
【问题描述】：

带有 position:fixed 的 HTML 元素在 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

如何强制位置：固定在 cdk-virtual-scroll-viewport 内的元素显示相对于视口的位置？

【问题讨论】：

标签： css angular angular-cdk angular-cdk-virtual-scroll

【解决方案1】：

这是因为 div.cdk-virtual-scroll-content-wrapper 元素上的 css 转换属性。 transform 属性使得位置固定的子级将父级视为包含块，而不是页面的主体。

详情请看这里 https://developer.mozilla.org/en-US/docs/Web/CSS/position

仍在尝试自己解决此问题。

【讨论】：