CSS堆叠上下文

1，堆叠顺序

1，background，
2，border，
3，块级元素，
4，浮动元素，
5，内联元素，
6，绝对/相对定位{
z-index:0；
z-index:为正；
}

堆叠顺序.png

如果是兄弟元素重叠，那么后面的覆盖前面的。
z-index只出现在定位里，正的z-index堆叠顺序最靠近用户，负z-index离用户最远。

z-index:1 会盖住z-index:0。

但如果整个div是相对定位了一个 -z-index应在Border和块级元素之间。

2，堆叠上下文（The Stacking context）

堆叠上下文并没有明确的定义，只有出现了一些元素时才会触发堆叠上下文，如：

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
  -webkit-overflow-scrolling 属性被设置 "touch"的元素

如果后面父元素的z-index值比前一个的z-index值大的话，那么这个后面的父元素里所有子元素都会盖住前一个父元素的子元素。不管前一个父元素里子元素z-index值是不是比后一个父元素里子元素的z-index值大还是小，都会被后面的盖住。