水平导航栏与h2元素重叠，页面布局异常求助

问题根源 #

• <nav>设置了position: absolute，导致元素脱离正常文档流，不再占据页面空间，后续h3元素会向上填充原本nav的位置，引发重叠
• 导航栏的<ul>内部使用float: left，但未清除浮动，可能造成父元素高度塌陷，进一步干扰布局

修复方案 #

1. 移除nav的position: absolute和display: inline-block，让它回到正常文档流
2. 给#horBar添加清除浮动的处理，解决父元素高度塌陷问题
3. 给nav添加上下间距，避免和后续h3元素紧贴

修改后的代码 #

CSS代码

h2{
    position: relative;
    text-align: center;
    letter-spacing: 5px;
    word-spacing: 5px;
    font-size: 40px;
    font-family: Header;
}

/* 调整nav样式，移除脱离文档流的属性 */
nav{
    margin: 1rem 0; /* 添加上下间距，分隔导航和后续内容 */
}

ol,
ul {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
h1 {
  padding: 13px;
}
#horBar {
  margin: 11px;
  font-family: Serif;
  width: 1000px;
  overflow: hidden; /* 清除浮动，确保父元素能包裹住li */
}

#horBar li {
  display: block;
  width: 117px;
  float: left;
  margin-left: 4px;
  border: 2px double rgb(82, 20, 20);
}

#horBar a {
  color: #006;
  background-color: rgb(255, 255, 255);
  text-decoration: none;
  padding: 4px;
  display: block;
}

#horBar a:hover {
  color: rgb(237, 124, 124);
  background-color: #006;
}

HTML代码

<nav>
  <ul id="horBar">
    <li><a href="home.html">Home</a></li>
    <li><a href="customer.html">Customer</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="orders.html">Orders</a></li>
    <li><a href="reports.html">Reports</a></li>
    <li><a href="administrations.html">Administrations</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

额外优化（如果需要固定导航） #

如果希望导航栏固定在页面顶部，推荐用position: sticky替代absolute，这样既可以固定位置，又不会让后续元素错位：

nav{
    position: sticky;
    top: 0;
    background-color: white; /* 添加背景，防止滚动时被后面内容穿透 */
    margin: 1rem 0;
    z-index: 100; /* 确保导航在最上层，不被其他元素覆盖 */
}

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