位置：固定和变换 - 如何返回正常的固定行为？答案

【问题标题】：Position: fixed and transform - how to return normal fixed behavior?位置：固定和变换 - 如何返回正常的固定行为？
【发布时间】：2016-11-01 23:21:35
【问题描述】：

我使用transform: translateZ(0); 作为移动修复（我需要不断地渲染一个 div）。但是transform 创建了另一个上下文，现在我的fixed div 的高度取决于父高度，而不是视口高度，因为它没有transform。

我需要transform，但我也需要正常的fixed 行为。我该怎么办？

【问题讨论】：

请准确解释为什么需要使用translateZ(0)。
translateZ(0) 强制 Chrome Android 正确重绘 div。它允许 div 在 Chrome Android 地址栏出现或隐藏时具有适当的高度
在固定定位的元素上使用translateZ 是不行的。我已经为您的问题添加了一个可能的解决方案。

标签： html css css-position transform

【解决方案1】：

Chrome 上有很多关于这个“问题”的错误报告。在编写粘性插件时，我自己也遇到过同样的问题，但事实证明这实际上是正常行为。这是因为transform 根据W3 specs 使用它自己的坐标系。基本上，元素获得相对于它自己的固定位置的固定位置。不幸的是，您对此无能为力。

可能的解决方案

解决您的问题的一种方法是给“粘性”元素一个absolute 位置 - 相对于文档。然后使用 JavaScript 重新定位元素。大致如下：

var element = document.getElementById('element');

window.addEventListener('scroll', function() {
    requestAnimationFrame(setTop);
});

function setTop() {
    element.style.top = window.pageYOffset;
}

这样，元素的行为就好像它有一个固定的位置，而您仍然可以毫无问题地使用transform 属性。

【讨论】：