实际上,我已经找到导致问题的原因。我的问题是为什么现在加入transform到你的html, body断position: fixed?
transform
html, body
position: fixed
原始问题
对我来说,最简单的CSS任务似乎失败了:position: fixed不保持元素相对于视点的位置。考虑以下样式表:
.stay-there-dammit { position: fixed; right: 0px; left: 0px; z-index: 1030; }
首次加载页面时,定位正确。但是,视口的任何更改(例如滚动或调整大小)都不会影响.stay-there- dammit元素的位置。可以这么说,它无法使其位置适应新的视口。
.stay-there- dammit
足够奇怪的是,该站点显示了如何position: fixed工作,实际上在我的浏览器中正常工作,没有任何问题!
因此,问题是: 是否有可能破坏固定定位的东西?
顺便说一句。我使用Bootstrap 3。
更新:
似乎是某些第三方应用程序对进行设置的转换html,body打破了position: fixed。这是我必须删除的内容:
html,body
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时固定的位置不起作用
但为什么?
关于 为什么 ,迈耶(Meyer)从本文快速引述如下:
即使对于已设置为position:fixed的后代,转换后的元素也会创建一个包含块。换句话说,变换元素的固定位置后代的包含块是变换元素,而不是视口
自2011年以来一直存在这种古怪的行为。