z-index引发的bug

问题描述

原来的代码：

<style>
.header-bg {
  position: relative;
  z-index: -1;
}
</style>
<div id="app">
  <div class="layout">
    <div class="header">
      <img class="header-bg" src="..." alt="背景图" />
      <div class="content">1233</div>
    </div>
  </div>
</div>

现在需要对页面背景色做调整。

.layout {
  background: #f9f9f9;    
}

这导致了头部的背景图没有了。

当用户上滑页面时，头部会逐渐消失。根据上滑距离设置头部的opacity。

只要用户稍微上滑，头部背景又会出现。

原因分析

1. .header-bg设置了z-index:-1; position:relative导致.header-bg的层叠顺序是小于.layout的(默认auto/0)。
2. .header-bg和.layout属于同一个层叠上下文html中，所以.layout元素在上层显示。

用户上滑时

1. 由于上滑时.header设置了opacity不等于1，此时.header会形成新的层叠上下文。
2. .header-bg不再属于html这个层叠上下文，现在属于.header这个层叠上下文的，它的层级高度取决于.header的层叠等级。
3. .header与.layout都属于html这个层叠上下文中，但由于.header在.layout后面或内部，所以层级更高，显示.header元素。

如何修改

方式一

最简单的方式是将.header-bg的z-index样式去掉，由于它的位置是在.header的顶部，所以默认是在最下方。

当然去掉position:relative可以使z-index:-1不生效。

方式二

设置#app的样式：display: flex，同时设置.layout的样式：z-index: 0。

这样.layout就形成层叠上下文(如果元素的display属性设置为flex|inline-flex，子元素z-index不为auto，则该子元素形成层叠上下文)。

未上滑时，.header-bg属于.layout这个层叠上下文中。

在层叠上下文中，背景的层叠等级要小于z-index小于0的元素。

附：层叠顺序图