设置z-index后下拉菜单仍被页面内容遮挡如何解决？

• 鼠标悬停顶部+按钮触发的下拉菜单无法覆盖下方pane窗格元素，手动给下拉菜单设置z-index:10、pane设置z-index:0后仍未实现覆盖效果
• 鼠标移动到下拉菜单选项区域时菜单会直接消失，原因是pane实际遮挡在下拉菜单上层，浏览器判定鼠标悬停对象变为pane，离开了下拉按钮的触发范围
• 复现路径：鼠标悬停顶部+按钮调出下拉菜单，多次点击面板内的新增+按钮即可复现遮挡问题
• 异常截图：
  
  

pane元素现有CSS #

.pane {
  background-color: rgb(192, 192, 192);
  border: solid rgba(128, 128, 128, 0.463) 2px;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 2vw;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  border-radius: 2px;
  width: 14ch;
  height: 15ch;
  mix-blend-mode: darken !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(211, 211, 211, 0.404) rgba(255, 255, 255, 0), 0);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.7;
  backdrop-filter: blur(30px);
  z-index: 0;
}

下拉菜单现有CSS #

#dropdown {
  position: relative;
  display: inline-block;
  z-index: 10;
}

#dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(128, 128, 128, 0.534);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 8px 12px;
  z-index: 10;
}

1. z-index仅对非静态定位元素（即position属性值为relative/absolute/fixed/sticky的元素）生效，当前.pane未设置position属性，默认值为static，写的z-index:0完全不参与层叠顺序计算。
2. .pane设置了opacity:0.7（值小于1）、mix-blend-mode: darken、backdrop-filter: blur(30px)三个属性，任意一个属性存在时都会让元素自动生成独立层叠上下文，层叠顺序会高于未创建高层叠上下文的普通定位元素，哪怕下拉菜单设置了z-index:10，只要其所在父级的层叠层级低于pane，就会被pane遮挡。
3. 下拉菜单被pane遮挡后，鼠标移动到菜单区域时实际悬停在pane元素上，已经离开+按钮的hover触发范围，因此菜单会直接消失。

1. 给承载顶部+按钮的父容器（比如顶部导航栏、工具栏）添加以下样式，确保整个顶部操作区的层叠层级高于所有pane元素，不受动态插入pane的DOM顺序影响：

/* 替换为你项目中顶部按钮栏对应的实际选择器 */
.top-operation-bar {
  position: relative;
  z-index: 999;
}

2. 给.pane补充定位属性，让z-index规则正常生效：

.pane {
  /* 新增下方一行，其余原有样式全部保留 */
  position: relative;
}

3. 排查校验：如果修改后仍存在遮挡，检查#dropdown的所有祖先元素，是否存在设置了opacity<1、transform、filter、mix-blend-mode属性的元素，这类元素会自动创建层叠上下文，z-index的比较仅在同一个层叠上下文内部生效，需要将该祖先元素的z-index设置为高于pane的层级。

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