关于css层叠上下文，层叠顺序的一个案例分析

该文章的理解纯属个人理解，如有误请及时留言，或联系作者，方便改正，谢谢。

欢迎关注我的github-blog的地址，你的关注会是我更新的动力。

介绍css层叠上下文文档和文章很多，不了解的同学可以下面链接，进行了解：

MDN - The stacking context

张鑫旭 - 深入理解CSS中的层叠上下文和层叠顺序

彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

那么接下来讲一个我自己看到的一个案例，及其理解

css代码

.xx{
  /* opacity: .99;  */
}

.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.red {
  z-index: 1;
  top: 20px;
  left: 20px;
  background: red;
}
.green {
  top: 60px;
  left: 60px;
  background: green;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
}
.cccc{
    height: 100px;
    width: 100px;
    background: #000;
}
复制代码

html代码

<div class="cccc">ccccc</div>
<div class="xx">
  <div class="red">Red</div>
</div>
<div class="green">Green</div>
<div class="blue">Blue</div>
复制代码

效果如下：

我们来分析一下这个案例，先引用一张图片说明层叠顺序。为方便表述，从紫色到红色，命名一个层叠顺序级别1-7。比如，图中红色z-index>0的，我们称层叠顺序为7。

黑色的div块是正常的文档流，也就是说是没有层叠上下文的block块。它对应的父层叠上下文是html根元素。那么它的层叠顺序应该是3。之所以写这个block模块是想以它为参考。

然后根据DOM文档顺序，接下来看red，green，blue块。

red块有position: absolute和z-index:1,创建了层叠上下文，并且层叠顺序上属于7。

green块有position: absolute，但是z-index:auto为默认值，是没有创建层叠上下文的，所以层叠顺序为6。

同理blue块的层叠顺序为6。

那我们看一下现在的层叠上下文和层叠顺序:

• html根层叠上下文
  • black普通block块，层叠顺序为3
  • red层叠上下文，层叠顺序为7
  • green绝对定位块，无层叠上下文，层叠顺序为6
  • blue绝对定位块，无层叠上下文，层叠顺序为6

和效果图是不是一样？

我们改改css代码,给red块的父元素（div）增加一个opacity不为1的属性。

.xx{
  opacity: .99; 
}
复制代码

让我们来看看新的效果：

我们可以发现red块被green块遮住了，让我们来分析一下为什么？

发生变动的是red的父元素div，因为设置了opacity: .99，使得red的父元素创建了层叠上下文。那么现在的层叠上下文和层叠顺序是这个样子的:

• html根层叠上下文
  • black普通block块，层叠顺序为3
  • red父元素层叠上下文，由opacity不等于1产生，层叠顺序为6(css3新属性不依赖z-index产生的层叠上下文的层叠顺序为6)
    • red层叠上下文，层叠顺序为7
  • green绝对定位块，无层叠上下文，层叠顺序为6
  • blue绝对定位块，无层叠上下文，层叠顺序为6

这样的话black，green，blue只和red的父元素比较层叠顺序了，而此时red父元素，green，blue的层叠顺序相同，按文档的顺序重叠，也就是后来居上，后面的覆盖前面的，因此产生了这样的效果。

转载于:https://juejin.im/post/5c87190851882575eb6ac670