一、z-index
z-index属性用于设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
其在不设置时默认为auto，设置时只能取整数，如”-2，-1，0，1，2，…”。
该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延申到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
注意：
z-index只对指定了position属性的元素生效- 当没有指定
z-index时，所有元素都会被渲染在默认层（0层）
二、什么是层叠上下文
层叠上下文（stacking context）是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的x轴、y轴和表示层叠的z轴。当页面中的元素发生堆叠时，就会出现一个元素覆盖另一个元素的情况。
若一个元素含有层叠上下文（即其为层叠上下文元素），它在z轴上就更靠近观察者，即显示在画布的上层，会覆盖与它产生堆叠的其他元素。
三、什么是层叠等级
层叠等级（stacking level），又称层叠级别、层叠水平。
- 在同一个层叠上下文中，它决定该层叠上下文中的层叠上下文元素在
z轴上的上下顺序 - 在普通元素中，它决定这些普通元素在
z轴上的上下顺序
注意：
- 普通元素的层叠等级优先由层叠上下文决定，因此层叠等级的比较只有在同一层叠上下文中才有意义。
- 只有在定位元素和
flex盒子的孩子元素中，z-index可以影响层叠等级，但层叠等级对于所有的元素都存在
四、什么是层叠顺序
层叠顺序（stacking order）表示元素发生层叠时有着特定的垂直显示顺序。
注意：层叠上下文和层叠水平是概念，层叠顺序是规则
在CSS2.1规范中，层叠顺序规则遵循下面这张图
五、创建层叠上下文
1. 根层叠上下文
HTML中的根元素<html></html>本身就具有层叠上下文，称为“根层叠上下文”。这也时绝对定位元素在没有其他定位元素限制时，会相对于浏览器窗口定位的原因。
2. 定位元素与传统层叠上下文
普通元素设置position属性为非static值且设置z-index属性为具体数值（不是auto）时，会产生层叠上下文。
3.CSS3中的属性对层叠上下文的影响：
- 父元素的
display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素 - 元素的
opacity属性值不是1 - 元素的
transform属性值不是none - 元素
mix-blend-mode属性值不是normal - 元素的
filter属性值不是none - 元素的
isolation属性值是isolate will-change指定的属性值为上面任意一个- 元素的
-webkit-overflow-scrolling属性值设置为touch
六、层叠关系的比较准则
- 当页面中两个元素发生堆叠时，其或其祖先元素必处于同一层叠上下文（最差情况下同处根层叠上下文）
- 此时若其层叠等级（
z-index）不同，则等级高的覆盖等级低
<div style="position:relative; z-index:auto;"
最低0.47元/天 解锁文章
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
