chrome与firefox的z-index行为不同

Question

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

.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>

页面是这样生成的,当它滚动时,.parent会在下面.bodycontent但是.el在它上面.这适用于我希望它在Firefox中,但不适用于Chrome.

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

Answer 1

Chrome和Firefox都按预期工作

从版本22开始,这是Chrome有意处理fixed元素堆叠的方式.正如Google自己撰写的一篇文章所述:

在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值的绝对或相对定位的元素形成它们自己的堆叠上下文(也就是说,它们的所有子元素将在父元素中按顺序排序而不是交错的来自父母以外的内容).从Chrome 22开始,position:fixed元素也会创建自己的堆叠上下文.

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

这样做的结果意味着,在你的榜样.el的z-index比较计算到其父,.parent.它显示在下面.bodycontent:

• .bodycontent的z-index是相对于根
• .el的z-index是相对于.parent
• .parent的z-index是相对于根
• .parent的z-index未指定因此它被设置为缺省值auto(实际上,0)
• .parent具有较低的z-index比.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;
}

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

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

哪个是对的？

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

移动浏览器(Mobile Safari,Android浏览器,基于Qt的浏览器)将位置:固定元素放置在自己的堆叠上下文中并且有一段时间(自iOS5,Android Gingerbread等),因为它允许某些滚动优化,使网页更多对触摸更敏感.由于以下三个原因,更改将被带到桌面:

1 - 在"移动"和"桌面"浏览器上具有不同的呈现行为是网络作者的绊脚石; CSS应尽可能在任何地方都一样.

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

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

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

如何获得理想的结果

这种行为可以被规避的唯一方法是将.el出来的.parent,而是使它成为同级:

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>