37、CSS进阶——堆叠上下文及z-index

堆叠上下文

堆叠上下文（stack context），它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。

1. 创建堆叠上下文的元素

1. html元素（根元素）;
2. 设置了z-index（非auto）数值的定位元素(relative/absolute/fixed).

注意就算有个元素是一个定位元素，其z-index设为auto，是不能创建堆叠上下文的。

设置z-index，通常情况下，该值越大，越靠近用户（越靠前）。类似图层的概念。只有定位元素设置z-index有效。

2. 同一个堆叠上下文中元素在Z轴上的排列

从后到前的排列顺序：

1.创建堆叠上下文的元素的背景和边框；

html元素的背景和边框在堆叠上下文的最下面。

注意，同一个堆叠上下文中，不管创建堆叠上下文的元素index的值为多少，它都在这个堆叠上下文的最下面。

2.堆叠级别(z-index, stack level)为负值的堆叠上下文；

同一堆叠级别的堆叠上下文，后面定义的覆盖前面定义的。

3.常规流非定位的块盒；
4.非定位的浮动盒子；
5.常规流非定位行盒；
6.任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的堆叠上下文；
7.堆叠级别为正值的堆叠上下文；

类似于BFC，每个堆叠上下文，独立于其他堆叠上下文，它们之间不能相互穿插。