为什么-webkit-transform：translate3d（0，0，0）混淆了固定子节点

问题描述

我一直在努力在最后几个小时，以确定一个子元素是如何定位对其父，而不是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:

这是第二个问题的答案：

Here is the answer to the second question:




推荐答案

您的第一个问题：

您正在使用transforms。

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

查看规格：

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

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

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