为什么使用-webkit-transform: translate3d(0, 0, 0)会影响固定子元素？

Question

我最近几个小时一直试图弄清楚为什么子元素被定位到其父元素而不是屏幕视口，即使它被设置为 'fixed'。很幸运，我偶然发现提到在父元素上使用-webkit-transform: translate3d(0, 0, 0)会出现问题。我正在使用bootstrap框架，他们确实将此属性放在其中一个父元素拥有的.navbar-fixed-top类中。一旦我将其删除，子元素开始相对于视口定位。所以我有两个问题：

1.为什么-webkit-transform: translate3d(0, 0, 0)会产生这种恶劣的影响？ 2.为什么Bootstrap的开发者要给.navbar-fixed-top类添加这个属性？

更新： 好吧，似乎我已经找到了第二个问题的答案。这是提交信息：

应用translate3d到模态、固定导航栏和affix以解决浏览器重绘

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

除了'none'之外的任何计算值都会创建一个堆叠上下文和一个包含块。该对象作为固定定位后代的包含块。

- courses.indepth.dev

---

简短回答是“堆叠上下文” - 搜索这个词并阅读一些好的（长）解释。 - Michael Mullany

Answer 1

关于您的第一个问题：

您正在使用变换效果(transforms)，这就是引起问题的原因。

请查看规范：变换渲染模型

在应用值为非 'none' 的 'transform' 属性时，会在该元素上建立一个新的局部坐标系。

因此，固定定位的元素将相对于具有变换效果的元素而不是视口进行定位。

- Danield

Answer 2

我使用了这个“hackery”（-webkit-transform: translate3d(0, 0, 0)）来修复变换比例带来的故障（一些元素在我与页面交互时会移动），但在Webkit上固定位置的文本输入框无法设置焦点，当我删除它时问题就解决了。由于我只在Firefox上使用了变换比例，所以对我来说没有问题可以将其删除（在Webkit上，我最终使用缩放代替变换比例，但是-webkit-transform: translate3d(0, 0, 0)仍然留在遗留CSS中，我希望Firefox也支持缩放）。

- Andreas

Answer 3

根据mdn文档，fixed定位会将元素从正常文档流中移除，并附加到包含块上。

该元素从正常文档流中移除，在页面布局中不为该元素创建空间。它相对于视口建立的初始包含块定位，除非其祖先之一具有设置为非none的变换、透视或滤镜属性（请参见CSS变换规范），或者将will-change属性设置为transform，在这种情况下，该祖先将作为包含块。

关于mdn文档中的元素包含块是：

• 如果元素位置为fixed，则包含块为具有视口尺寸的初始包含块。
• 或者可以通过特定的css属性transform、perspective、will-change、filter、contain、backdrop-filter来设置包含块，在这种情况下，元素将相对于指定的元素定位。

在这种情况下，问题中提到的transform属性会创建包含块，固定定位的元素将基于此进行定位。

- Nerius Jok