CSS中的z-index

前置知识：

（1）所有的盒模型元素都处于三维坐标系中。 除了常用的横坐标和纵坐标， 盒模型元素还可以沿着“z轴”层叠摆放， 当它们相互覆盖时， z轴层叠顺序就变得十分重要。

（2）z-index只对定位元素有作用。

1、默认层叠顺序（7阶层叠水平）

由底层到外层依次时 

(1) 根元素的background和border

(2) z-index为负

(3) block块状盒子

(4) float浮动元素

(5) inline/inline-block水平盒子

(6) z-index为auto/0，或不依赖于z-index的层叠上下文（即定位元素没有指定z-index的时候，默认在此层渲染。）

(7) z-index 为正

2、层叠上下文（与块级格式化上下文BFC性质相似）

注：层叠上下文可以使底层元素上升到与相邻上层元素同级，然后再根据后来者居上原则。（层递上下文的使用必须是相邻的两层，隔层无法比较）。

2.1   下面这两个是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：

谁大谁上：当具有明显的层叠水平标示（不在同一级别上）的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

转载自：https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

2.2    层叠上下文的触发方式：

（1）根元素 (HTML)

（2）z-index 值不为 "auto"的 绝对/相对定位

（3）一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex。（需满足两个条件才能触发：1是父级需要是display:flex或者display:inline-flex水平，2是子元素的z-index不是auto，必须是数值。则这个子元素为层叠上下文元素）

（4）opacity 属性值小于 1 的元素（参考 the specification for opacity）

（5）transform 属性值不为 "none"的元素

（6）mix-blend-mode 属性值不为 "normal"的元素

（7）filter值不为“none”的元素

（8）perspective值不为“none”的元素

（9）position: fixed

（10）isolation 属性被设置为 "isolate"的元素

（11）在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值

（12）-webkit-overflow-scrolling 属性被设置 "touch"的元素

参考：https://www.cnblogs.com/CCCLARITY/p/8290403.html

https://segmentfault.com/a/1190000007051005