在基于Web的地图应用开发中，我们经常会遇到这样一个尴尬局面：页面上放了一个用来筛选数据的下拉菜单，可是当它展开时，却被底下的地图画布挡住了，鼠标点不到选项，或者选项显示不全。这种现象并不是浏览器bug，而是由CSS的层叠上下文和z-index机制决定的。很多地图类库，例如Leaflet、OpenLayers以及高德地图的JS API，在初始化时都会给地图容器设置特定的position属性和较大的z-index数值，从而让地图瓦片、标注和弹窗处于一个独立的层级体系中。如果我们自己写的下拉菜单没有正确建立层叠上下文，就会默认处于文档流的底层，被地图覆盖。
理解z-index与层叠上下文的基本原理
要想让下拉菜单稳定地显示在地图上方，第一步是搞清楚z-index到底在什么条件下才生效。根据CSS规范，z-index属性 only 对定位元素（即position值为relative、absolute、fixed或sticky的元素）起作用。如果一个元素没有设置position，那么给它写z-index: 9999也不会产生任何层叠顺序上的变化。更重要的是，z-index的值并不是在整个人生文档里比大小，而是在同一个层叠上下文内部进行比较。每一个设置了position且z-index不为auto的元素，或者具有transform、opacity小于1、filter等属性的元素，都会创建一个全新的层叠上下文。这意味着，如果你的下拉菜单外层有一个地图容器已经建立了层叠上下文，那么菜单的z-index再高，也无法突破父级上下文的边界去压住另一个上下文里的地图。
举个常见的错误例子：开发者把地图放在一个<div class="map-box">里，又给这个map-box设置了position: relative和z-index: 1；然后把下拉菜单写在map-box外面，单独设了z-index: 100。表面上看菜单数值更大，但因为地图内部可能还有自己的定位层，且菜单与地图不在同一上下文比较链路上，最终地图画布依旧在上。正确的思路应当是：让下拉菜单的承载容器与地图容器成为兄弟节点，并且都处于body的直接层叠上下文下，或者确保菜单容器的父级没有形成限制它的层叠上下文。
此外还需要注意，部分地图库会使用iframe来加载地图内容，例如某些旧版嵌入式地图。iframe本身就是一个独立的文档，拥有自己的层叠上下文，常规页面的z-index无法控制iframe内部内容的层级，但可以控制iframe元素本身在父页面中的层级。因此如果地图是iframe实现的，我们需要提升iframe的兄弟菜单层级，而不是试图用z-index去压iframe里面的东西。
在地图容器中正确叠加下拉菜单的CSS实践
下面以最常见的原生DOM结构为例，展示一种稳妥的布局方式。我们将地图容器和下拉菜单容器设为同级，都挂在页面根容器内，并分别给予定位属性和合理的z-index。这样两者在同一个父层叠上下文里竞争显示顺序，菜单就能自然浮在地图之上。
HTML结构可以写成这样：
<div class="page">
<div id="map" class="map-container"></div>
<div class="filter-bar">
<button id="toggleBtn">选择类型</button>
<ul id="dropdown" class="dropdown-menu">
<li>餐饮</li>
<li>酒店</li>
<li>景点</li>
</ul>
</div>
</div>
对应的CSS需要显式打开定位并赋值z-index。地图容器一般地图库会自己处理，我们主要保证菜单栏的层级：
.map-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.filter-bar {
position: relative;
z-index: 20;
}
.dropdown-menu {
position: absolute;
top: 40px;
left: 0;
background: #fff;
border: 1px solid #ccc;
z-index: 21;
}
在这个例子里，filter-bar的z-index是20，大于地图的10，因此无论下拉菜单展开到什么位置，都会渲染在地图画布之上。如果地图库强制给容器写了内联style比如z-index: 400，那你只需要把filter-bar的z-index调到500以上即可。但请避免无脑写z-index: 99999，那样会让后期维护时层级混乱，建议用统一的层级变量管理。
另一个实践是使用position: fixed来脱离文档流限制。如果下拉菜单属于全局工具栏，可以直接用fixed定位，并设较高z-index，这样它和地图容器通常是兄弟关系，不会被地图内部的局部上下文影响。不过在移动端要注意fixed元素在输入框唤起时的兼容问题。
常见遮挡问题与调试避坑指南
即便写对了z-index，有时菜单仍然点不动，这往往是因为地图容器在菜单展开区域上方盖了一层透明的事件捕获层。很多地图库为了处理拖拽，会在最上层放一个透明的<div>用于监听鼠标事件，这个层的z-index可能比你的菜单还高。此时你需要用浏览器开发者工具查看元素层级面板，找到这个透明层，要么用CSS提高菜单z-index压倒它，要么给地图容器加pointer-events: none（仅限不需要地图交互时）。如果既要地图可拖拽又要菜单可点，就必须保证菜单z-index高于该透明层且菜单本身未被父级上下文限制。
还有一种坑是父级transform导致的上下文隔离。比如你给包含菜单的卡片加了transform: translateY(0)做动画，这一下就创建了层叠上下文，导致里面菜单的z-index只在卡片内有效，无法超越外面的地图。解决办法是不要把菜单放在有transform的祖先里，或者同样给卡片提层级并确保它整体高于地图容器。下表列出几种典型场景与对策：
| 现象 | 原因 | 解决方案 |
|---|---|---|
| 菜单被地图遮住 | 菜单未定位或z-index小于地图 | 设position与更大z-index |
| 菜单在地图内但点不到 | 地图透明事件层拦截 | 提高菜单z-index或调pointer-events |
| z-index写了没用 | 祖先有transform/opacity创建上下文 | 调整DOM结构避免隔离 |
最后提醒，使用第三方面板组件（如Ant Design的Select）时，它们常把下拉用portal挂到body末尾，这其实有利于层级控制，但如果地图也是挂body且带了高z-index，你依然需要在全局CSS里覆盖组件的z-index变量。通过统一规划从1000起步的地图相关层级和2000起步的浮层层级，可以让项目中的叠加关系清晰可控，彻底解决地图上方下拉菜单被遮挡的烦恼。