Question

有时我的侧边栏带有“ position：fixed”（滚动：页面固定）滚动。它仅在Chrome中发生。我认为视口发生了一些错误（我还实现了延迟加载，可能会影响视口）。我发现决定适用于侧边栏元素'transform：translateZ（0）'。问题似乎消失了，但我不明白变换对固定位置的元素有何影响？在问这个问题之前，我已经阅读了很多有关它如何工作的信息，但是我无法理解它是如何解决问题的，所以也许需要修复导致视口溢出的元素？非常感谢，对不起我的英语。

Answer 1

position: fixed 将始终相对于初始窗口视口定位元素，除非元素的祖先之一具有 transform 属性，在这种情况下，祖先表现为新视口：

.container {
    transform: translateZ(0); // the "new" viewport
    
    .child {
        position: fixed;
        top: 1rem; // 1rem relatively to .container
    }
}

因此，当您为容器赋予 transform 属性时，它充当 relative 子容器的 fixed 容器并对您的问题进行排序。

查看Mozilla's CSS/position docs - 他们很好地解释了这个主题。

位置：固定并转换translateZ

1 个答案: