Html 为什么-webkit转换：translate3d（0,0,0）与固定的子对象混淆

在过去的几个小时里，我一直在试图弄清楚为什么一个子元素是针对它的父元素而不是screenport定位的，即使它被定位为“固定的”。非常幸运的是，我无意中发现了这样一个说法，即父对象上的

-webkit transform:translate3d（0，0，0）

会使事情出错。我使用的是

bootstrap

框架，因此他们确实将此属性放在父元素之一所拥有的

.navbar固定顶

类上。一旦我移除它，孩子们就开始重新定位视口。所以我有两个问题：

为什么

-webkit transform:translate3d（0，0，0）

会做这些讨厌的事情

为什么bootstrap人员将此属性放在

.navbar fixed top

类中

更新
看来我找到了第二个问题的答案。以下是提交消息：

将translate3d应用于模态，导航栏固定并粘贴到作战浏览器 重新油漆

以下是第二个问题的答案：

变换的任何计算值（none除外）都会导致 创建堆叠上下文和包含块。对象 用作固定定位子体的包含块

---

我使用这个“hackery”（-webkit transform:translate3d（0，0，0））来修复transform scale（一些元素在与页面交互时移动）中的小故障，但我在webkit上的位置固定问题（我无法将焦点设置在固定位置的文本输入上）当我删除它时，它是固定的。因为我只在firefox上使用transform scale，所以删除它对我来说没有问题（在webkit上，我最终使用了zoom，它的性能比transform:scale好得多（但是-webkit transform:translate3d（0，0，0）是遗留css留下的），我希望firefox也支持zoom）关于您的第一个问题：

您正在使用转换。这就是问题的根源

请看一下规范：

为“transform”属性指定“none”以外的值 在其所在的图元处建立新的局部坐标系 适用于

---

因此，具有固定位置的元素将成为相对于具有变换的元素的元素-而不是视口

简单的答案是堆叠上下文-通过谷歌搜索，您将得到一些好的（长的）解释