absolute定位的Dropdown被后续元素遮挡，如何通过CSS调整层级？

解决方案 #

你之前设置z-index不生效的核心原因是层叠上下文限制：div.esri-menu的非static定位祖先元素创建了层叠上下文，子元素的z-index只能在父元素的层叠等级范围内生效，无法突破父容器和遮挡元素的层级差。

按以下顺序调整CSS即可解决：

• 首先给Dropdown的最近非static定位父元素设置层级，优先级高于遮挡元素所在的层叠上下文：

/* 请将选择器替换为你Dropdown的实际定位父容器选择器，示例为.esri-dropdown的情况 */
.esri-dropdown {
  position: relative;
  z-index: 9999;
  /* 避免父容器裁剪超出范围的下拉菜单 */
  overflow: visible !important;
}

• 若层级仍未生效，给遮挡元素设置更低的层级：

div.row-2 .column-1 {
  position: relative;
  z-index: 1;
}

• 若存在行内样式或其他高优先级样式覆盖你的自定义规则，强制提升下拉菜单本身的层级：

div.esri-menu {
  position: absolute !important;
  z-index: 99999 !important;
}

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