如何使h2位于h1下方且不破坏导航栏布局？

嘿，我懂你遇到的麻烦了——绝对定位确实容易搞乱文档流，导致元素“乱跑”，而且还不能动nav的布局对吧？别着急，下面几个方案应该能帮你搞定：

方案1：给header-section留好占位空间 #

因为position:absolute会让header脱离文档流，后面的content-section根本“看不到”它的存在，所以直接给header设置固定高度，再给content加个对应的上边距就行：

/* 保留你header原有的样式，新增高度和宽度 */
.header-section {
  font-family: monospace;
  font-size: 25px;
  position: absolute; /* 不动这个属性，避免影响nav */
  height: 60px; /* 数值根据你h1的实际高度调，比如字体25px的话，60px足够 */
  width: 100%; /* 确保header占满页面宽度，防止内容溢出 */
}

/* 让content-section自动排在header下面 */
.content-section {
  margin-top: 60px; /* 和header的高度保持一致 */
}

这个方法最省心，只要header的内容高度固定，就不会出问题。

方案2：把header的绝对定位换成相对定位（几乎不影响nav） #

如果你的nav是靠header的绝对定位来实现定位的（比如nav是header的子元素，用absolute定位在里面），那把header改成position:relative完全没问题——相对定位的元素依然能作为子元素绝对定位的参考容器，同时不会脱离文档流：

.header-section {
  font-family: monospace;
  font-size: 25px;
  position: relative; /* 替换原来的absolute */
  /* 其他原有样式都保留 */
}

改完之后，content-section会自动乖乖排在header下方，nav的布局也不会受影响，完美！

方案3：给body加顶部内边距适配header #

如果你的header是全屏顶栏样式，给body加个等于header高度的padding-top，让整个页面内容下移，这样content里的h2自然就到h1下面了：

body {
  padding-top: 60px; /* 和header的高度匹配 */
}

.header-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
}

这个方法适合header固定在顶部的场景，不会打乱其他元素的布局。

小提醒 #

如果不确定nav会不会受影响，可以先试试方案2——相对定位是绝对定位的“温和替代版”，只要nav是相对于header定位的，就完全不会出问题。要是方案2不行，再用方案1或3，都能解决h2位置的问题～

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