相关疑难解决方法(0)

在过去的几个小时里,我一直在努力弄清楚一个子元素如何定位于它的父元素而不是屏幕端口,即使它被定位为"固定".非常幸运的是,我偶然发现提到-webkit-transform: translate3d(0, 0, 0)父母可能会让事情变得糟糕.我正在使用bootstrap框架,因此他们确实将此属性放在.navbar-fixed-top父元素之一的类上.一旦我将其移除,孩子就开始重新定位视口.所以我有两个问题:

1. 为什么-webkit-transform: translate3d(0, 0, 0)要做这些讨厌的事情？
2. 为什么bootstrap家伙把这个属性放在.navbar-fixed-top课堂上？

更新
好吧,似乎我找到了第二个问题的答案.这是提交消息:

应用translate3d到modal,navbar-fixed和affix来对抗浏览器重绘

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

对于变换,除了none之外的任何计算值都会导致创建堆叠上下文和包含块.该对象充当固定定位后代的包含块.

实际上我找到了导致问题的原因.我的问题是为什么要加入transform你的html, body休息时间position: fixed？

原来的问题

对我来说,最简单的CSS任务似乎失败了:position: fixed不保持元素相对于视点的位置.考虑以下样式表:

.stay-there-dammit {
  position: fixed;
  right: 0px;
  left: 0px;
  z-index: 1030;
}

页面首次加载时,定位正确.但是对视口的任何更改(例如滚动或调整大小)都不会影响.stay-there-dammit元素的定位.所以说它不会使其位置适应新的视口.

奇怪的是这个网站显示了position: fixed应该如何工作,实际上在我的浏览器中工作没有任何问题!

所以问题是:是否有任何可能破坏固定定位的东西？

顺便说一句.我使用Bootstrap 3.

更新:

似乎是由某些第三方应用程序设置的转换html,body打破了position: fixed.这是我必须删除的内容:

html, body {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3, mirror=1);
  -webkit-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
       -o-transform: scale(1, 1);
          transform: scale(1, 1);
}

似乎以下问题解决了同样的问题:

使用-webkit-transform时,固定的位置不起作用

但为什么？