过去几个小时,我一直在努力研究一个孩子元素如何定位到其父母而不是屏幕,即使它被定位为“固定”.非常幸运的是,我偶然提到-webkit-transform:translate3d(0,0)对父母可以使事情变得糟糕.我使用bootstrap框架,所以他们确实把这个属性放在父元素之一的.navbar-fixed-top类中.一旦我删除它,孩子开始重新定位视口.所以我有两个问题:
为什么-webkit-transform:translate3d(0,0)做这些讨厌的事情?
>为什么bootstrap的人把这个属性放在.navbar固定顶级的类中?
UPDATE
好的,我已经找到第二个问题的答案.这是提交消息:
Applied translate3d to modal,navbar-fixed and affix to combat browser
repaint
这是第二个问题的答案:
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.
解决方法
关于你的第一个问题:
你正在使用转换.这是导致问题的原因.
看看规格:The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
因此,具有固定定位的元素将变为相对于具有变换的元素 – 而不是视口