为什么`变换'中断`位置:固定'? [英] 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);
}
下面的问题似乎解决了同一问题:
但为什么? 解决方案
一个变形元素创建一个包含块,即使对于已经设置为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屋!