CSS中div显示在页面header上方，如何修复该布局异常？

看起来你的地铁地图div跑到header上面去了，这种情况通常和CSS定位层级、文档流顺序或者浮动影响有关，我给你几个针对性的解决办法：

1. 调整z-index层级（最常见原因） #

如果你的header是默认的静态定位（position: static），它的层级会比任何设置了position: relative/absolute/fixed的元素低。你只需要给header设置更高的层级，同时确保地图div的层级低于它：

• 给你的header添加如下CSS（假设header的类是.header，如果是id就用#header）：

.header {
  position: relative; /* 必须设置非static的定位，z-index才生效 */
  z-index: 999; /* 数值比地图div大就行，比如999足够高 */
}

• 同时给你的.subway-map补充定位和层级：

.subway-map {
  /* 保留你原有的样式 */
  margin: 0;
  width: 500px;
  height:410px;
  background-color: white;
  /* 新增以下两行 */
  position: relative;
  z-index: 1; /* 数值小于header的z-index */
}

2. 检查文档流顺序 #

如果你的HTML结构里，.subway-map写在header标签的前面，在普通文档流中它会先渲染，可能因为某些布局（比如浮动、绝对定位）跑到header上方。你可以：

• 直接调整HTML顺序，把header放在.subway-map的前面；
• 如果用了Flex/Grid布局，可以通过order属性调整显示顺序，比如给header设置order: -1让它排在前面。

3. 清除浮动的影响 #

你的#legend用了float: left，可能导致.subway-map父元素高度塌陷或者布局错位，间接让它跑到header上方。可以给.subway-map添加overflow: hidden来清除内部浮动：

.subway-map {
  /* 保留原有样式 */
  overflow: hidden; /* 新增这行 */
}

修改后的完整CSS示例 #

/* 先给header设置层级 */
.header {
  position: relative;
  z-index: 999;
  /* 这里保留你header原有的样式，比如背景、高度等 */
}

/* The main DIV for the map */
.subway-map {
  margin: 0;
  width: 500px;
  height:410px;
  background-color: white;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Text labels */
.text {
  text-decoration: none;
  color: black;
}

#legend {
  float: left;
  width: 250px;
  height:400px;
}

#legend div {
  height: 25px;
}

#legend span {
  margin: 5px 5px 5px 0;
}

.subway-map span {
  width: 200px !important;
}

如果尝试以上方法后还是有问题，可以告诉我你的header的CSS代码和HTML结构，我再帮你进一步排查~

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