堆叠上下文
堆叠上下文(stack context),它是一块区域,这块区域由某个元素创建,它规定了该区域中的内容在Z轴上排列的先后顺序。
1. 创建堆叠上下文的元素
- html元素(根元素);
- 设置了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,每个堆叠上下文,独立于其他堆叠上下文,它们之间不能相互穿插。