z-index优先级的层叠上下文问题？

在CSS中，z-index仅适用于层叠上下文（stacking context）内的元素。因此，我们需要了解层叠上下文的规则和优先级。

以下是一些创建层叠上下文的常见属性：

• position属性（relative、absolute、fixed）
• transform属性
• opacity属性

具有更高z-index值的父级元素将覆盖具有较低z-index值的子级元素。但是当父级元素和子级元素属于不同的层叠上下文时，情况可能会变得复杂。

以下是一些有关层叠上下文优先级的常见规则：

• 相对于祖先层叠上下文，具有更高层叠上下文的元素具有较高的z-index优先级。
• 未创建层叠上下文的元素元素的z-index不会影响具有层叠上下文的元素。
• 元素与其兄弟元素的z-index不能影响它们的父元素（除非父元素自己有层叠上下文）。

以下是一个简单的代码示例，其中两个带有z-index的div元素位于同一层叠上下文中，但一个嵌套在具有更高z-index的元素内部：

<div style="position: relative; z-index: 1;">
  <div style="position: relative; z-index: 2;"></div>
</div>

在这种情况下，内部div将覆盖外部div，因为它具有更高的z-index并与祖先层叠上下文相关联。但如果我们交换z-index，外部div将覆盖内部div。