层叠上下文（stacking context）

一、什么是层叠式上下文

层叠上下文，是HTML中的一个三维概念

如果元素具备以下任何一个条件，则该元素会创建一个新的层叠上下文。

• 根元素
• z-index不为auto的定位元素

二、什么是层叠级别

同一个层叠上下文的背景色以及内部元素，谁在上谁在下，这些都是由层叠级别来决定的。层叠级别是针对同一个层叠上下文而言的。

在同一个曾得上下文中，层叠级别从低到高排列如下：

1. 边框和背景：也就是当前层叠上下文的边框和背景
2. 负z-index：z-index为负值的“内部元素”
3. 块元素：普通文档流下的块盒子（block-levelbox）
4. 浮动盒子：非定位的浮动元素
5. 行内盒子：普通文档流下的行内盒子
6. z-index：0：z-index为0的“内部元素”
7. 正z-index：x-index为正值的“内部元素”

三、层叠上下文的特点

• 在同一层叠上下文中，我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上，层叠级别小的元素显示在下
• 在同一层叠上下文中，如果两个元素的层叠级别相同，则后面的元素在前面的元素的上面，遵循后来者居上的原则
• 在不同的层叠上下文中，我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定显示的先后顺序，与自身的层叠级别无关