chrome与firefox的z-index行为不同

Question

我有一堆CSS应用于父元素及其子元素：

＆＃13;

＆＃13;

.parent {
  position: fixed;
  top: 0px;
}
.el {
  position: fixed;
  top: 5px;
  z-index: 100;
}
.bodycontent {
  z-index: 1;
  position: relative;
}

＆＃13;

<div class="parent">
  <div class="el">
    <button></button>
  </div>
</div>
<div class="bodycontent"></div>

＆＃13;

＆＃13;

＆＃13;

制作页面时，滚动时.parent位于.bodycontent下方，但.el位于其上方。这可以解决我在Firefox中的需求，但不适用于Chrome。

有什么建议吗？我尝试过使用不同的z-index值和不同的position值但没有成功。

Answer 1

Chrome和Firefox都按预期工作

从版本22 开始，这就是Chrome有意处理fixed元素堆叠的方式。正如谷歌自己的一篇文章所述：

  

在Chrome 22中，position:fixed元素的布局行为与以前的版本略有不同。现在，所有position:fixed元素都会形成新的堆叠上下文。这将改变某些页面的堆叠顺序，这可能会破坏页面布局。

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

Firefox正在按计划运作。 Mozilla文档声明此行为本地化为移动WebKit和Chrome 22以后：

  

在移动WebKit和Chrome 22+上，position：fixed总是创建一个新的堆叠上下文，即使z-index是“auto”

（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context）

为什么会发生这种情况

此更改的结果意味着，即使父容器的z-index 设置为auto（默认值），Chrome也会始终创建新的堆叠上下文。这与position: absolute;和position: relative;不同，因为当z-index 未设置为auto时，它们仅形成自己的堆叠上下文。

  

页面上的大多数元素都在单个根堆叠上下文中，但是具有非自动z-index值的绝对或相对定位的元素形成了它们自己的堆叠上下文（也就是说，它们的所有子元素都将是z-在父级内排序，而不是与父级外部的内容交错）。从Chrome 22开始，position:fixed元素也会创建自己的堆叠上下文。

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

这意味着，在您的示例中，.el的{​​{1}}相对于其父z-index进行计算。它显示在.parent下，因为：

• .bodycontent的{​​{1}}相对于根
• .bodycontent的{​​{1}}与z-index
相关
• .el的{​​{1}}相对于根
• z-index的{​​{1}}未指定，因此设置为默认.parent（实际上为.parent）
• z-index的{​​{1}}低于.parent，因此显示在z-index下方。由于auto属于它，因此它也显示在0。
下

预期结果的例子

.parent

z-index

上述代码将在Chrome和Firefox中产生以下结果：

哪个是对的？

Chrome似乎没有遵循W3C规范，并且进行了此更改，以便桌面实施与移动设备实现相匹配：

  

移动浏览器（移动Safari，Android浏览器，基于Qt的浏览器）将位置：固定元素放置在自己的堆叠上下文中并且有一段时间（因为iOS5，Android Gingerbread等），因为它允许某些滚动优化，使得网页对触摸的响应速度更快。由于三个原因，这一变化正在进入桌面：

     

1 - 在“移动”和“桌面”浏览器上具有不同的呈现行为是网络作者的绊脚石;在可能的情况下，CSS应该在任何地方都一样。

     

2 - 对于平板电脑，不清楚哪种“移动”或“桌面”堆叠上下文创建算法更合适。

     

3 - 将滚动性能优化从移动设备优化到桌面设备对用户和作者都有好处。

Firefox正在以正确的方式处理堆叠。

如何获得所需的结果

可以绕过这种行为的唯一方法是将.bodycontent移出.el，而不是让它成为兄弟姐妹：

.bodycontent

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