为什么`transform` 会破坏`position: fixed`? [英] Why does `transform` break `position: fixed`?

问题描述

其实我已经找到了导致问题的原因.我现在的问题是为什么将 transform 添加到您的 html, body 会破坏 position: fixed?

Actually I have found what has caused the problem. My question is now why adding transform to your html, body breaks the position: fixed?

原问题

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

The most simple CSS task seems to fail for me: position: fixed does not keep the position of the element relative to the view point. Consider the following stylesheet:

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

页面第一次加载，定位正确.但是对视口的任何更改(例如滚动或调整大小)都不会影响 .stay-there-dammit 元素的定位.可以这么说，它并没有根据新的视口调整其位置.

For the first time the page loads, the positioning is correct. But any changes to viewport such as scrolling or resizing doesn't affect the positioning of .stay-there-dammit element. So to speak it doesn't adapt its position to the new viewport.

奇怪的是这个网站，它显示了如何定位:固定应该可以工作，实际上可以在我的浏览器中正常工作，没有任何问题！

Strangely enough this site which shows how position: fixed should work, actually work in my browser with no problems whatsoever!

所以问题是:有什么可能会破坏固定定位吗?

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

Btw. I use Bootstrap 3.

更新:

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

It seems that it was the transform set by some third-party application on html,body that broke the position: fixed. Here is what I had to remove:

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);
}

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

It seems that the following question addresses the same issue:

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

但是为什么?

推荐答案

关于 why，快速引用此 文章 迈耶:

转换后的元素甚至为已设置为 position: fixed 的后代创建一个包含块.换句话说，变换元素的固定位置后代的包含块是变换元素，而不是视口

A transformed element creates a containing block even for descendants that have been set to position: fixed. In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport

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

It's a quirky behavior that's been around since 2011.

这篇关于为什么`transform` 会破坏`position: fixed`?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！