相对元素内嵌套z-index问题：如何让.arrow元素置于所有层级之上

问题核心在于堆叠上下文的限制：.wrapper设置了position: relative和z-index: 2，这会创建一个独立的堆叠上下文。.arrow作为它的子元素，哪怕设置了更高的z-index，也只能在.wrapper的上下文内部排序，无法突破到外部和.background的层级竞争。

以下是无需修改HTML结构的解决方案：

方案1：移除.wrapper的z-index，取消独立堆叠上下文 #

修改.wrapper的CSS，移除z-index属性：

.wrapper {
  position: relative;
  background-color: green;
  width: 200px;
  height: 200px;
  /* 移除原有的z-index: 2 */
}

此时.wrapper不再创建独立堆叠上下文，.arrow的z-index: 3会相对于.container的堆叠上下文生效，自然会覆盖z-index: 2的.background。

方案2：保留.wrapper层级的同时允许子元素突破 #

如果需要让.wrapper在.container内部保持层级，可给.container设置基础z-index，同时将.wrapper的z-index改为auto：

.container {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: red;
  z-index: 1; /* 添加基础z-index */
}

.wrapper {
  position: relative;
  background-color: green;
  width: 200px;
  height: 200px;
  z-index: auto; /* 将原z-index:2改为auto */
}

z-index: auto不会触发独立堆叠上下文，.arrow的z-index就能和.background在同一层级竞争，确保黄色箭头显示在最上层。

内容的提问来源于stack exchange，提问作者Stairss