为什么`变换'中断`位置：固定'？ [英] Why does `transform` break `position: fixed`?

问题描述

其实我找到了造成这个问题的原因。我的问题是现在为什么添加转换到 html，body 打破位置：fixed ？

原始问题

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

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

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

奇怪的是本网站，它显示了 position：fixed 应该如何工作，实际上在我的浏览器中工作，没有任何问题！

所以问题是：有什么可能打破固定定位？

顺便说一下。我使用Bootstrap 3。

更新：

由 html，body 上的某些第三方应用程序设置的转换集破坏了位置：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

但为什么？

解决方案

关于 为什么 ，来自 article



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

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

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

Original problem

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

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!

So the question is: Is there anything that might break fixed positioning?

Btw. I use Bootstrap 3.

UPDATE:

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:

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

BUT WHY?

解决方案

Regarding the why, a quick quote from this article by meyer:

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

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

这篇关于为什么`变换'中断`位置：固定'？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！