一尘不染

为什么“转换”会破坏“位置:固定”?

css

实际上,我已经找到导致问题的原因。我的问题是为什么现在加入transform到你的html, bodyposition: 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时固定的位置不起作用

但为什么?


阅读 194

收藏
2020-05-16

共1个答案

一尘不染

关于 为什么 ,迈耶(Meyer)从本文快速引述如下:

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

自2011年以来一直存在这种古怪的行为。

2020-05-16