z-index介绍

z-index

元素堆叠上下文的创建和行为

元素的堆叠上下文（stacking context）是决定元素在Z轴上的层次顺序的关键概念。以下是创建堆叠上下文的常见情况和相关行为：

创建堆叠上下文的条件

1. 非static定位和非auto z-index：当元素的position属性值为非static（如relative、absolute、fixed、sticky），且z-index值不是auto时，会创建一个新的堆叠上下文
2. CSS Grid或Flexbox子元素：如果元素是CSS Grid或Flexbox的子元素，且z-index值不是auto，也会创建一个新的堆叠上下文
3. 透明度小于1：当元素的opacity值小于1时，会创建一个新的堆叠上下文
4. 变换、过滤、透视和裁剪路径：如果元素的transform、filter、perspective或clip-path属性值不是默认值，也会创建一个新的堆叠上下文

堆叠上下文的行为

• 层次限制：元素的堆叠层次会被限制在最近一层的祖先堆叠上下文中
• 根堆叠上下文：只有一个根堆叠上下文，所有其他堆叠上下文都是其子集
• 文档顺序：在各种设置一致的情况下，元素在文档中出现的顺序决定了它们的堆叠层次，后出现的元素在上