CSS-Z-index

一、没有使用z-index时，元素的堆叠顺序：

1. 根元素的背景和边框
2. 非定位的后代块元素，按照在HTML中的出现顺序进行堆叠
3. 定位的后代块元素，按照在HTML中的出现顺序进行堆叠

二、浮动块的堆叠顺序：

1. 根元素的背景和边框
2. 非定位的后代块元素，按照在HTML中的出现顺序进行堆叠
3. 浮动块
4. 非定位元素的后代行内元素
5. 定位的后代块元素，按照在HTML中的出现顺序进行堆叠

三、使用z-index自定义堆叠顺序
注意：z-index只能用于定位了的元素、如果z-index相同，则按照默认规则比较、未指定z-index，默认为auto

1. 对于定位的元素，z-index对其有影响，堆叠顺序与数字大小符合

四、堆叠上下文
如果任何一个元素满足一下条件之一，就会生成一个堆叠上下文

1. 文档的根元素（HTML）默认为一个堆叠上下文
2. position值为"absolute"或"relative"，且z-index指定了除了auto以外值的元素
3. position值为"fixed"或"sticky"
4. 弹性布局的子元素，且z-index指定了除了auto以外值的元素
5. opacity的值小于的元素
6. mix-blend-mode的值不是normal的元素
7. 以下属性值不为"none"的元素: transform、filter、perspective、clip-path、mask / mask-image / mask-border
8. isolation值为"isolate"的元素
9. -webkit-overflow-scrolling值为"touch"的元素
10. will-change指定了除初始值以外的任何属性的元素
11. contain值为"layout"/"paint"及含义其中之一的组合值的元素

注意事项：

1. 在每个堆叠上下文内部，子元素的堆叠规则遵循上面所讲的基本规则。
2. 堆叠上下文可以包含在其他堆叠上下文内部，它们会创建一个堆叠上下文层级结构。
3. 堆叠上下文的层级结构与HTML的元素不同，因为对于没有创建堆叠上下文的元素会被父元素同化。堆叠上下文的层级只包括创建了堆叠上下文的元素。
4. 堆叠上下文独立于其兄弟元素，在处理自身内部堆叠时，只考虑其后代元素。内部堆叠完成后，将当前堆叠上下文当成一个整体，考虑在父堆叠上下文中的堆叠顺序。通俗的说，子堆叠上下文的z-index值只在父堆叠上下文中有意义。

五、注意事项

1. z-index: 0与z-index: auto并不相同。 z-index: 0 会产生一个堆叠上下文，虽然元素本身堆叠顺序没有影响，但是其子元素的堆叠顺序会有影响。
2. 不要滥用z-index，将堆叠上下文的层级结构打平。

参考链接：
https://mp.weixin.qq.com/s/7YPt5-9J46R83ouola0Trw