html – z-index行为在chrome到firefox中有所不同

我有一堆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值和不同的位置值,但没有成功.

解决方法

Chrome和Firefox都按预期工作

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

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正在打算工作. Mozilla文档声明此行为本地化为移动WebKit和Chrome 22以后：

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)

为什么会这样

此更改的结果意味着即使父容器的z-index设置为auto(默认值),Chrome也始终会创建新的堆栈上下文.这与位置不同：绝对;和位置：相对;因为当z-index未设置为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)

这意味着在你的例子中.el的z-index是相对于它的父类.parent来计算的.它显示在.bodycontent下,因为：

> .bodycontent的z-index是相对于root的
> .el的z-index相对于.parent
> .parent的z-index是相对于root的
> .parent的z-index未指定,因此设置为默认自动(实际上为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 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正在以正确的方式处理堆叠.

如何获得理想的结果

可以规避这种行为的唯一方法是将.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>

原文地址：https://www.jb51.cc/html/226459.html