Question

实际上我找到了导致问题的原因。我的问题是，为什么在transform中添加html, body会导致position: fixed？{/ p>

原始问题

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

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

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

奇怪地this site显示了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);
}

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

Positions fixed doesn't work when using -webkit-transform

但是为什么？

Answer 1

关于 为什么 ，meyer快速引用此article：

即使对于已设置为position：fixed的后代，转换后的元素也会创建一个包含块。换句话说，转换元素的固定位置后代的包含块是转换元素，而不是视口

这是一种奇特的行为，自2011年以来一直存在。

为什么`transform` break`position：fixed`？

1 个答案: