层叠上下文

层叠上下文（Stacking Context）是HTML中的一个三维概念，它影响着元素的堆叠顺序和显示效果。如果一个元素具备以下任何一个条件，就会创建一个新的层叠上下文：

1. 根元素（元素，初始的层叠上下文）
2. 使用定位属性：将元素的定位属性设置为相对定位（position:relative）、绝对定位（position:absolute）或固定定位（position:fixed），这样可以创建新的层叠上下文。
3. 使用浮动属性：将元素的浮动属性设置为float:left或float:right，也可以创建新的层叠上下文。
4. 使用透明度属性：将元素的透明度设置为小于1的值，也可以创建新的层叠上下文。

层叠上下文的特性包括：

1. 层叠上下文的层叠水平要比普通元素高。
2. 层叠上下文可以阻断元素的混合模式。
3. 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
4. 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
5. 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

在同一个层叠上下文中，元素的堆叠顺序由层叠级别决定，层叠级别从低到高排列如下：

1. 边框和背景：也就是当前层叠上下文的边框和背景。
2. 负z-index：z-index为负值的“内部元素”。
3. 行内盒子：普通文档流下的行内盒子。
4. 正z-index：z-index为正值的“内部元素”。

在同一层叠上下文中，如果两个元素的层叠级别相同，则后面的元素在前面的元素的上面，遵循后来者居上的原则。在不同的层叠上下文中，我们比较的是“父级元素层叠级别”。