《CSS》层叠顺序 与 z-index

层叠上下文

之前，我了解到在css中，有“作用域”的存在，块级上下文(BFC)，浮动元素产生浮动流。position的absolute和fixed。只要position非static 设置了z-index，则无论在哪里，统一严格按照 z-index 设置的值决定 层级！

在昨天，做项目的时候发现了一个奇怪的现象。

div {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
}
.box1 {
  z-index: 10;
  background-color: skyblue;
}
.box2 {
  z-index: 9;
}
.content {
  z-index: 999;
  background-color: red;
}

<div class="box1"></div>

<div class="box2">
  <div class="content"></div>
</div>

三个div，都是脱离了文档流的，则按照我之前的理解，z-index 最大的是 .content，最上方的应该是红色div.content
可是结果...

image.png

---

查了一下，看到有人说是z-index会在一些情况失效。。。

我发现事情并非这么简单的失效...

后来看了一些资料和说法。

说层叠上下文从后到前的排列是有顺序的：

就像刷油漆，一层一层的刷：

1. 创建层叠上下文的元素的背景和边框
2. 层级 z-index 为负值的层叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位 行盒(inline 或者 inline-block)
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是0的层叠上下文
7. 层级 z-index 为正值的层叠上下文

几个特别注意点：

一：如果同一级的元素，没有设置 z-index(即z-index:auto)，则它的儿子们的层级取决于儿子们自己，否则取决于它！！

二：如果级别完全一模一样，则写在后面的，覆盖前面的

三：设置了position并且非static，它的 z-index才生效（注意不一定要脱离文档流，position: relative 也行）

四：每个成功生效的z-index的元素，在它的身上，创建一个新的 层叠上下文

五：如果该元素设置了属性transform的属性，则它的儿子们永远无法逃离出去了。。

<div class="father">
  <div class="son"></div>
</div>

<div class="mother">
  <div class="daughter"></div>
</div>

.father {
  transform: translate(1px, 1px);
}
.son {
  ...
  z-index: 999999
}

依然无法覆盖<div class="mother">
但是相反，在<div class="mother">设置transform，<div class="daughter>却能覆盖<div class="father">，因为后者能覆盖前者

---

回到我之前的问题：

为什么最上方的不是 z-index 最大的红色.content?

因为：它的父亲.box2和天蓝色div.box1是同一级，而父亲div.box1它自己设置了z-index而且还要比别人低。。。，导致无论儿子们的层级有多高，都盖不过别人家。。

如果父亲div.box1没有设置z-index，则盖到最上层的就是红色.content

还有一个稍复杂的场景

<div class="grandFather">
  <div class="father">
    <div class="son">小明</div>
  </div>
</div>

<div class="grandMother">
  <div class="mother">
    <div class="daughter">翠翠</div>
  </div>
</div>

.father {
  ...  // 设置宽高、定位
  z-index: 99;
}
.son {
  ...// 设置宽高、定位
 z-index: 999
}

.mother {
 ... //设置宽高、定位
 z-index: auto;
}
.daughter {
  ... // 设置宽高、定位
  z-index: 9999999;
}

这种情况，.son 依然会在.daughter上方，
因为，在他们的父一辈，.father层级比.mother大
无论.son再努力，也无法盖过 比他父辈大的层级。