层叠上下文（Stacking Context）是HTML中的一个三维概念，它影响着元素的堆叠顺序和显示效果。如果一个元素具备以下任何一个条件，就会创建一个新的层叠上下文：
- 根元素（<html>元素，初始的层叠上下文）
- 使用定位属性：将元素的定位属性设置为相对定位（position:relative）、绝对定位（position:absolute）或固定定位（position:fixed），这样可以创建新的层叠上下文。
- 使用浮动属性：将元素的浮动属性设置为float:left或float:right，也可以创建新的层叠上下文。
- 使用透明度属性：将元素的透明度设置为小于1的值，也可以创建新的层叠上下文。
层叠上下文的特性包括：
- 层叠上下文的层叠水平要比普通元素高。
- 层叠上下文可以阻断元素的混合模式。
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
- 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
在同一个层叠上下文中，元素的堆叠顺序由层叠级别决定，层叠级别从低到高排列如下：
- 边框和背景：也就是当前层叠上下文的边框和背景。
- 负z-index：z-index为负值的“内部元素”。
- 行内盒子：普通文档流下的行内盒子。
- 正z-index：z-index为正值的“内部元素”。
在同一层叠上下文中，如果两个元素的层叠级别相同，则后面的元素在前面的元素的上面，遵循后来者居上的原则。在不同的层叠上下文中，我们比较的是“父级元素层叠级别”。