Chrome浏览器的z-index行为与Firefox不同 [英] z-index behaviour is different in chrome to firefox
问题描述
.parent {position:fixed; el:position:fixed; top:0px;}。顶部:5px; z-index:100;}。bodycontent {z-index:1; position:relative;}
< div class =parent > < div class =el> <按钮>< /按钮> < / div>< / div>< div class =bodycontent>< / div>
页面滚动时, .parent
位于 .bodycontent
但是
.el
超过它。这工作,我希望它在Firefox,但不是在Chrome浏览器。
有什么建议吗?我已经尝试了不同的 z-index
值和不同的位置
值,但没有成功。 b $ b
Chrome和Firefox都按预期工作
/ strong>,这是Chrome有意处理 fixed
元素堆叠的方式。正如Google自己写的一篇文章所说:
在Chrome 22中,
position:fixed
元素与之前的版本略有不同。所有位置:固定
元素现在形成新的堆叠上下文。这将改变一些页面的堆叠顺序,这可能会破坏页面布局。
(
哪个正确?
Chrome并没有遵循W3C规范,并且做出了这样的改变,以使桌面实现与移动实现相匹配: b
$ b
移动浏览器(Mobile Safari浏览器,Android浏览器,基于Qt的浏览器)把位置固定在自己的堆栈上下文中,并有一段时间(从iOS5,Android姜饼等),因为它允许一定的滚动优化,使网页更能响应触摸。由于以下三个原因,这个改变被引入桌面:
$ b $ 1在移动和桌面浏览器上呈现不同的呈现行为是网络作者的绊脚石;如果可能的话,CSS应该在任何地方工作。
2 - 使用平板电脑,不清楚哪个移动或桌面堆叠上下文创建算法更合适。
$ b <3> - 从手机到桌面的滚动性能优化对用户和作者都有好处。
Firefox正在以正确的方式处理堆叠。
如何获得想要的结果
这种行为可以被绕过的唯一方法是将 .el
移出 .parent
,而是使它是一个兄弟姐妹:
body {margin:0;} div {height: 100像素; width:100px;}。parent {background-color:red;位置:固定; top:0;}。el {background-color:blue; left:25px;位置:固定;顶部:25px; z-index:100;}。bodycontent {background-color:green; left:50px;位置:相对;顶部:50px; z-index:1;}
< div class = parent>< / div>< div class =el>< / div>< div class =bodycontent>< / div>
I have a bunch of CSS that is applied to a parent element and its children:
.parent {
position: fixed;
top: 0px;
}
.el {
position: fixed;
top: 5px;
z-index: 100;
}
.bodycontent {
z-index: 1;
position: relative;
}
<div class="parent">
<div class="el">
<button></button>
</div>
</div>
<div class="bodycontent"></div>
The page is made so that when it is scrolled, .parent
goes underneath .bodycontent
but .el
goes above it. This works how I want it to in Firefox but not on Chrome.
Any suggestions? I have tried messing around with different z-index
values and different position
values with no success.
Both Chrome and Firefox are working as intended
From version 22 onwards, this is the way Chrome intentionally handles the stacking of fixed
elements. As stated in an article by Google themselves:
In Chrome 22 the layout behavior of
position:fixed
elements is slightly different than previous versions. Allposition:fixed
elements now form new stacking contexts. This will change the stacking order of some pages, which has the potential to break page layouts.
Firefox is working as it intends too. The Mozilla docs state that this behaviour is localised to mobile WebKit and Chrome 22 onwards:
on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto"
(https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
Why this happens
The result of this change means that Chrome will always create a new stacking context even if the z-index
of the parent container is set to auto
(the default). This differs from position: absolute;
and position: relative;
as they only form their own stacking context when z-index
is not set to auto
.
Most elements on a page are in a single, root stacking context, but absolutely or relatively positioned elements with non-auto
z-index
values form their own stacking contexts (that is, all of their children will be z-ordered within the parent and not be interleaved with content from outside the parent). As of Chrome 22,position:fixed
elements will also create their own stacking contexts.
The effect of this means that in your example .el
's z-index
is computed relatively to its parent, .parent
. It is displayed under .bodycontent
because:
.bodycontent
'sz-index
is relative to the root.el
'sz-index
is relative to.parent
.parent
'sz-index
is relative to the root.parent
'sz-index
is not specified so it is set to the defaultauto
(in effect,0
).parent
has a lowerz-index
than.bodycontent
and is therefore displayed under it. Because.el
belongs to it, it too is displayed under.bodycontent
.
Example of expected results
body {
margin: 0;
}
div {
height: 100px;
width: 100px;
}
.parent {
background-color: red;
position: fixed;
top: 0;
}
.el {
background-color: blue;
left: 25px;
position: fixed;
top: 25px;
z-index: 100;
}
.bodycontent {
background-color: green;
left: 50px;
position: relative;
top: 50px;
z-index: 1;
}
<div class="parent">
<div class="el"></div>
</div>
<div class="bodycontent"></div>
The above code will produce the following results in Chrome and Firefox:
Which is right?
It would appear that Chrome is not following the W3C spec and that this change was made so that the desktop implementation matched the mobile implementation:
Mobile browsers (Mobile Safari, Android browser, Qt-based browsers) put position:fixed elements in their own stacking contexts and have for some time (since iOS5, Android Gingerbread, etc) because it allows for certain scrolling optimizations, making web pages much more responsive to touch. The change is being brought to desktop for three reasons:
1 - Having different rendering behavior on "mobile" and "desktop" browsers is a stumbling block for web authors; CSS should work the same everywhere when possible.
2 - With tablets it isn’t clear which of the "mobile" or "desktop" stacking context creation algorithms is more appropriate.
3 - Bringing the scrolling performance optimizations from mobile to desktop is good for both users and authors.
Firefox is handling the stacking in the correct way.
How to get the desired result
The only way this behaviour can be circumvented is to move .el
out of .parent
and instead make it a sibling:
body {
margin: 0;
}
div {
height: 100px;
width: 100px;
}
.parent {
background-color: red;
position: fixed;
top: 0;
}
.el {
background-color: blue;
left: 25px;
position: fixed;
top: 25px;
z-index: 100;
}
.bodycontent {
background-color: green;
left: 50px;
position: relative;
top: 50px;
z-index: 1;
}
<div class="parent"></div>
<div class="el"></div>
<div class="bodycontent"></div>
这篇关于Chrome浏览器的z-index行为与Firefox不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!