CSS进阶之堆叠上下文

堆叠上下文

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

创建堆叠上下文的元素

1. html元素（根元素）
2. 设置了z-index数值（非auto值）的定位元素

同一个堆叠上下文中元素在z轴上的排列顺序。

从后到前的排列顺序：

1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别（z-index，stack level）为负数的堆叠上下文，负数相同后面的覆盖前面
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何z-index为auto的定位元素，以及z-index是0的堆叠上下文
7. 堆叠级别为正值的堆叠上下文

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