位置：固定和变换：translateZ答案

【问题标题】：Position: fixed and transform: translateZ位置：固定和变换：translateZ
【发布时间】：2019-07-14 11:11:45
【问题描述】：

有时我的带有position: fixed 的侧边栏会随着页面滚动。它只发生在 Chrome 中。我认为视口发生了问题（我也实现了延迟加载，可能会影响视口）。我决定将transform: translateZ(0) 应用于侧边栏元素。问题似乎消失了，但我不明白transform 对位置固定的元素有何影响？

在问这个问题之前，我已经阅读了很多关于它如何工作的信息，但我无法理解它是如何解决问题的，也许需要修复导致视口溢出的元素？非常感谢，对不起我的英语。

【问题讨论】：

translateZ 不能直接与位置一起使用，但这并不意味着它们不会相互影响，因为它完全基于上下文。最好发布您的代码，以便我们在上下文中解释正在发生的事情。

标签： css position overflow viewport fixed

【解决方案1】：

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

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

因此，当您为容器提供 transform 属性时，它充当 relative 容器到 fixed 子级并排序您的问题。

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

【讨论】：