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. All position:fixed elements now form new stacking contexts. This will change the stacking order of some pages, which has the potential to break page layouts.

(https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements?hl=en)

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.

(https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements?hl=en)

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's z-index is relative to the root
• .el's z-index is relative to .parent
• .parent's z-index is relative to the root
• .parent's z-index is not specified so it is set to the default auto (in effect, 0)
• .parent has a lower z-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屋！