为什么-webkit-transform：translate3d（0，0，0）混淆了固定子节点 [英] why -webkit-transform: translate3d(0, 0, 0) messes up with fixed childs

问题描述

我一直在努力在最后几个小时，以确定一个子元素是如何定位对其父，而不是screenport，即使它被定位为'固定'。幸运的是，我偶然发现，在父对象上的 -webkit-transform：translate3d（0，0，0）我使用 bootstrap 框架，所以他们的确把这个属性放在 .navbar-fixed-top 的父元素。一旦我删除它的孩子开始重新定位视口。所以我有两个问题：

I've been trying for the last few hours to figure out how come a child element was positioning against its parent and not the screenport even though it's positioned as 'fixed'. Very luckily, I stumbled across the mentioning that -webkit-transform: translate3d(0, 0, 0) on the parent can make things go awry. I'm using bootstrap framework and so they indeed put this property on the .navbar-fixed-top class which one of parent elements had. Once I removed it the child started to position agains viewport. So I have two questions:

1. 为什么 -webkit-transform：translate3d（0，0，0） / code>做这些讨厌的事情？


2. 为什么引导人把这个属性为 .navbar-fixed-top class？

1. Why does -webkit-transform: translate3d(0, 0, 0) do these nasty things?
2. Why do bootstrap guys put this property for the .navbar-fixed-top class?

UPDATE

好​​吧，回答第二个问题。这是提交消息：

UPDATE
Well, it seems that I've found the answer to the second question. Here is the commit message:

将translate3d应用于模态，导航栏固定和固定以打击浏览器
repaint

Applied translate3d to modal, navbar-fixed and affix to combat browser repaint

这是第二个问题的答案：

Here is the answer to the second question:

对于转换，任何计算的非零值都将导致堆栈上下文和包含块的
创建。对象
充当固定定位后代的包含块。

Any computed value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

推荐答案

您的第一个问题：

您正在使用transforms。

You are using transforms. That's what's causing the problem.

查看规格：变换渲染模型

指定非none 'transform'属性
在应用于
的元素上建立一个新的局部坐标系。

Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.

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

So the element with fixed positioning will become relative to the element with the transform - not the viewport

这篇关于为什么-webkit-transform：translate3d（0，0，0）混淆了固定子节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！