sticky粘性组件内弹出框层级遮挡问题解决方案咨询

问题核心本质 #

出现互相遮挡的原因和position: sticky的层叠特性直接相关：

• 只要给sticky定位的元素设置了非auto的z-index值，该元素就会创建独立的堆叠上下文，此时哪怕两个元素的z-index数值完全相等，DOM结构里靠后的sticky元素也会默认压在靠前的元素上方
• 你之前测试“移除sticky定位、同z-index就正常”，本质是去掉sticky后元素不再生成独立堆叠上下文，同z-index的元素会在同一个层叠基准下按内容顺序排序，不会无理由互相遮挡
• 调高单个元素z-index就会遮挡另一个，本质是打破了两个同层级堆叠上下文的平衡，直接把某一个元素的整体层叠顺序抬到了另一个之上

可落地的解决方案 #

方案1：动态切换hover状态下的粘性盒子层级 #

移除两个粘性盒子上固定设置的z-index值，只在鼠标悬停触发弹出框的瞬间，给当前交互的盒子临时提高层级，鼠标移出后立刻还原层级，从根源上避免两个盒子长期抢占高层级。
对应调整的代码：

.box {
  margin: 40px;
  padding: 20px;
  background: yellow;
  border: 1px solid red;
  position: sticky;
  /* 基础层级设为1，两个盒子非悬停状态下层级完全一致，不会互相遮挡 */
  z-index: 1;
}

/* 仅在当前盒子被悬停时临时提高层级，让它的弹出框能显示在最上层 */
.box:hover {
  z-index: 10;
}

• 完全保留sticky的定位特性，不需要修改原有DOM结构
• 不会出现永久层级抢占的问题，两个盒子的非交互状态始终保持同级
• 弹出框作为当前hover盒子的子元素，会自动跟随父级的层级顺序显示，不需要单独调整弹出框的z-index

该方案改动量最小，仅需调整外层盒子的z-index设置逻辑，不需要修改原有弹出框的定位和显示规则，是适配当前代码结构的最优选择。

方案2：通过内层容器隔离层叠，不修改外层粘性盒子的z-index #

如果希望外层sticky盒子完全不参与层叠排序，可以保持外层sticky盒子的z-index为auto（也就是不为它设置任何z-index值），把层级切换的动作放到内部触发弹出框的容器上。
对应调整的代码：

.box {
  margin: 40px;
  padding: 20px;
  background: yellow;
  border: 1px solid red;
  position: sticky;
  /* z-index保持auto，此时sticky元素不会创建独立堆叠上下文，不会拦截内层的层叠排序 */
}

.innerBox {
  width: 100px;
  height: 50px;
  background: lightgreen;
  position: relative;
}

/* 弹出框只需要在自己的父容器内保持最高层级即可 */
.popup1, .popup2 {
  position: absolute;
  width: 50px;
  height: 150px;
  left: 35px;
  display: none;
  z-index: 999;
}

.popup1 {
  top: 25px;
  background: red;
}

.popup2 {
  bottom: 25px;
  background: black;
}

/* 仅在hover内部容器时临时提高该容器的层级，让对应弹出框浮在最上层 */
.innerBox:hover {
  z-index: 2;
}

.box1:hover .popup1, .box2:hover .popup2 {
  display: block;
}

踩坑提醒：不要给两个sticky盒子同时设置大于1的固定z-index，只要z-index值不是auto，sticky元素必然生成独立的堆叠上下文，无论数值是否相等，都会出现DOM靠后元素遮挡靠前元素的问题。

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