如何实现下拉菜单（dropdown）显示在地图（map）上方

当前代码中，地图元素#map使用position: absolute脱离正常文档流，会覆盖页面上的其他元素；同时下拉菜单内容.dropdown-content使用position: relative，会占据文档流空间导致下拉展开时布局异常。以下是修复方案：

修复后的CSS代码 #

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 101; /* 高于地图的层级，确保显示在上方 */
  margin: 1rem; /* 可选：添加边距避免贴边，提升视觉效果 */
}

.dropdown-content {
  display: none;
  position: absolute; /* 改为绝对定位，相对于父容器.dropdown定位 */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 100;
  overflow: auto;
  height: 100px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#map {
  margin: 0;
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0; /* 明确位置，确保完整覆盖视口 */
  z-index: 100; /* 设置基础层级，方便下拉菜单层级对比 */
}

关键修改说明 #

1. 给.dropdown添加z-index:101和position:relative，确保下拉菜单容器处于地图图层上方
2. 将.dropdown-content的position从relative改为absolute，让下拉内容相对于父容器定位，不会占据文档流空间，避免布局偏移
3. 给#map明确设置top:0和left:0，保证地图完整覆盖整个视口

HTML代码无需修改，保持原结构即可。

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