在网页开发中，下拉菜单被地图组件遮挡是常见的问题，这背后涉及CSS层叠上下文的核心规则。要解决这个问题，首先需要理解层叠上下文的创建条件以及z-index的作用范围，才能正确调整元素层级。
什么是CSS层叠上下文
层叠上下文是CSS中一个三维的概念，元素在层叠上下文中会按照特定规则进行层级排列。我们可以把页面想象成有很多个透明的层，每个层叠上下文就是其中的一个层，层内的元素会在这个层的范围内比较层级，不会和层外的元素直接比较。
常见的会创建层叠上下文的情况包括：
- 根元素html本身就会创建一个顶层叠上下文
- position属性为absolute或relative，且z-index值不为auto的元素
- position属性为fixed或sticky的元素
- flex容器的子元素，且z-index值不为auto
- opacity值小于1的元素
- transform、filter、perspective等属性值不为none的元素
下拉菜单被地图遮挡的常见原因
很多地图组件为了实现复杂的交互效果，会设置transform或者opacity等属性，这就会让地图组件创建出一个独立的层叠上下文。如果下拉菜单的父元素没有创建层叠上下文，或者下拉菜单所在的层叠上下文层级比地图的层叠上下文低，那么即使给下拉菜单设置很高的z-index，也无法叠加在地图之上。
举个例子，假设地图组件的样式如下：
/* 地图组件样式，transform属性创建了层叠上下文 */
.map-container {
width: 100%;
height: 500px;
transform: translateZ(0); /* 触发层叠上下文创建 */
z-index: 1;
}
此时地图容器已经是一个独立的层叠上下文，内部的元素层级都在这个上下文内比较。如果下拉菜单的父元素没有创建层叠上下文，那么下拉菜单的z-index只会在它自己的层叠上下文内生效，无法和地图容器的层叠上下文比较，自然就会被遮挡。
解决下拉菜单叠加在地图之上的方法
方法一：让下拉菜单的父元素创建更高层级的层叠上下文
我们可以给下拉菜单的父容器设置position为relative，并且设置一个比地图容器更高的z-index，同时确保这个父容器没有触发其他会限制层叠上下文的属性。
/* 下拉菜单父容器样式 */
.dropdown-wrapper {
position: relative;
z-index: 2; /* 比地图容器的z-index高 */
}
/* 下拉菜单本身样式 */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
width: 200px;
background: #fff;
border: 1px solid #ccc;
z-index: 10; /* 在父容器的层叠上下文内层级足够高 */
}
/* 地图容器样式 */
.map-container {
width: 100%;
height: 500px;
transform: translateZ(0);
z-index: 1;
}
对应的HTML结构如下：
<div class="dropdown-wrapper">
<button class="dropdown-btn">展开菜单</button>
<div class="dropdown-menu">
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</div>
</div>
<div class="map-container" id="map"></div>
方法二：避免地图容器的层叠上下文影响
如果地图组件的transform属性不是必须的，可以尝试移除这类会触发层叠上下文的属性，让地图容器不创建独立的层叠上下文，这样下拉菜单的z-index就可以直接和地图容器比较层级。
/* 移除transform属性，不创建额外层叠上下文 */
.map-container {
width: 100%;
height: 500px;
z-index: 1;
}
/* 下拉菜单样式 */
.dropdown-menu {
position: absolute;
z-index: 2; /* 直接比地图容器z-index高即可 */
}
层叠上下文的层级比较规则
当多个层叠上下文比较层级时，会按照以下顺序从低到高排列：
- 层叠上下文的根元素背景和边框
- z-index为负的定位元素
- 非定位的块级元素
- 非定位的浮动元素
- 非定位的行内元素
- z-index为auto或者0的定位元素
- z-index为正数的定位元素
同一个层叠上下文内的元素，z-index值越大的层级越高；如果z-index相同，那么后出现的元素层级更高。不同层叠上下文的元素，先比较它们所属的层叠上下文的层级，再比较内部元素的z-index。
注意事项
在调整层级时，不要盲目给元素设置很高的z-index值，比如设置成9999，这样会导致后续维护时层级混乱。应该按照页面的结构合理规划层叠上下文的创建和z-index的取值，比如给导航栏、下拉菜单、弹窗等组件划分不同的层级区间，避免冲突。
另外，如果使用了第三方地图组件，比如高德地图、百度地图的JS API，这些组件默认可能会创建层叠上下文，此时可以查看组件的文档，看是否有配置项可以调整层级，或者按照上述方法调整下拉菜单的层叠上下文来解决遮挡问题。