层叠上下文和z-index

一、层叠上下文 MDN

层叠上下文 是指网页上的元素如何显示在其他元素之上，就像您可以将桌面上的索引卡并排放置或相互重叠一样。

当元素重叠的时候，会按照以下规则优先显示在离用户更近的地方，如果两个元素为普通元素，在没有以下指定特性的情况下，会按照后来居上的规则进行覆盖。

image.png

二、机制

• 以下行为会建层叠上下文

  
  
  image.png

定位元素和flex项可以设置z-index来控制层叠顺序

其他方法的z-index为0级别,遵循后来居上原则

• 每一个元素都有自己的层叠上下文环境，默认的是根元素，也就是HTML元素,但是为一个元素创建层叠上下文时候，该元素就成了该元素的所有子元素的层叠上下文环境。

.box {
  width: 100px;
  height: 200px;
  background: red;
  position: relative;
}
.box img {
  width: 200px;
  position: absolute;
  z-index: -1;
}

image.png

为什么图片会在他的父元素背景的下面呢？

那是应为上面说的所有元素默认的层叠上下文环境是根元素，按照我们层叠图来看负值的z-index层叠元素会在块级元素的后面，所以图片会跑到父元素的后面，但是只要为把它的父元素变成层叠元素，他的所有子元素就都会重新依赖于该父元素进行排序重叠。

.box {
  width: 100px;
  height: 200px;
  background: red;
  position: relative;
  z-index: 0; // 把z-index修改为0，就可以创层叠上下文。
}

image.png

• 层叠上下文的一些行为

  
  
  image.png

1.定位元素默认z-index: auto可以看成是z-index：0；

如果普通元素与层叠上下文元素发生重叠的时候，具有层叠上下文的元素会覆盖普通元素。

.a {
  width: 100px;
  height: 200px;
  background: red;
}
.b {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
  top: -150px;
}

image.png

2、z-index层叠顺序的比较止步于父级层叠上下文

层叠上下文是可以嵌套的，也就是一个层叠上下文元素的子元素可以建立自己的层叠上下文。但是该元素的层叠上下文不作用于父级上下文之外，该上下文只作用于该父级层叠上下文里面。

.a {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  z-index: 1;
}
.a .img {
  position: absloute;
  z-index: 999;
}
.b {
  width: 100px;
  height: 100px;
  position: relative;
  top: -10px;
  z-index: 1;
}
.b .img {
  position: absloute;
  z-index: -1;
}

image.png

我们会发现就算.a盒子里面的图片设置很大的z-index还是被设置-1的.b盒子里面的图片给覆盖，原因是.a和.b和都设置为层叠上下文元素，而b的层叠顺序比较高。