为什么设置position:absolute的模态框未脱离文档流仍显示在地图下方？

问题根源 #

你设置的position: absolute未生效的核心原因有2个：

1. 未给绝对定位的模态框设置top/left这类偏移属性，浏览器会默认将绝对定位元素放在它原本在正常文档流中的位置，也就是地图区块的下方
2. 没有给模态框的父级（这里是body）设置定位上下文，也没有配置z-index，容易出现模态框被地图遮挡的问题，同时你还没给模态框加默认隐藏的display: none属性

解决方案 #

按以下内容调整CSS即可实现需求：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  /* 新增：给body设置relative作为模态框的定位上下文 */
  position: relative;
}

#selectDiv {
  height: 3%;
}

#mapid {
  width: 100%;
  height: 97%;
}

#modal {
  position: absolute;
  /* 新增：和地图顶部对齐，左侧贴边 */
  top: 3%;
  left: 0;
  width: 45%;
  background-color: red;
  /* 新增：默认隐藏 */
  display: none;
  /* 新增：确保模态框层级高于地图，不会被遮挡 */
  z-index: 999;
  /* 可选：设置模态框高度和地图一致，内容溢出时滚动 */
  height: 97%;
  overflow-y: auto;
}

后续你选中国家需要显示模态框时，只要用JS把#modal的display属性改为block即可。

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