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

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

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

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

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代码

    
     ccccc
    
    
  
     
      Red
     
    
    
     Green
    
    
     Blue
    
复制代码

效果如下：

我们来分析一下这个案例，先引用一张图片说明层叠顺序。为方便表述，从紫色到红色，命名一个层叠顺序级别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的层叠顺序相同，按文档的顺序重叠，也就是后来居上，后面的覆盖前面的，因此产生了这样的效果。