如何实现导航栏换行置于灰色容器且不与#header-nav-bild-wrapper重叠

架构老林

2026-5-8

解决方案：让导航栏在小屏幕换行且与图片不重叠

我来帮你搞定这个导航布局的问题！咱们先理清楚核心矛盾：原来的#header-nav设置了固定高度，加上图片和导航都用了绝对定位，导致小屏幕下导航内容放不下就会和图片重叠，容器也没法自动扩展高度包裹换行后的内容。接下来用Flex布局重构导航容器，就能轻松实现你要的效果：

具体修改步骤

重构导航容器的布局逻辑
把#header-nav改成Flex布局，去掉固定高度，让容器自动适配内容高度，同时方便控制图片和导航的排列：

#header-nav {
  top: 0;
  position: fixed!important;
  width: 100%;
  background-color: #3d3f45;
  /* 替换固定高度为Flex布局 */
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
}

调整图片与导航的定位方式
删掉原来的绝对定位，用Flex的间距控制位置，让导航区域在小屏幕自动换行：

#header-nav-bild-wrapper {
  position: static; /* 去掉绝对定位 */
}
#site-navigator-wrapper {
  margin-left: auto; /* 让导航靠右对齐 */
  width: auto;
}
#site-navigator {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 给导航项之间加间距，提升美观度 */
}
.navlinks-wrapper {
  height: auto; /* 去掉固定高度，让内容撑开容器 */
  padding: 8px 12px;
}
.navlinks {
  margin-top: 0;
  font-size: 25px;
  height: auto;
}

修正媒体查询的冗余样式
删掉原来媒体查询里的绝对定位设置，让Flex布局自然生效，同时给小屏幕下的图片和导航加个间距：

@media(max-width:768px){
  #site-navigator {
    width: 100%;
    margin-top: 10px; /* 小屏幕下图片和导航分开 */
  }
  /* 保留原有的网格布局样式 */
  .col-1{width:50%;} 
  .col-2{width:50%;}
}

避免页面内容被固定导航遮挡
因为导航栏高度不再固定，给body加个顶部内边距，确保页面内容不被导航挡住：

html,body{ 
  margin:0; 
  font-family:Raleway,Lato,"Helvetica Neue",Arial,sans-serif; 
  font-size:16px; 
  height:10000px; 
  padding-top: 70px; /* 给导航预留空间 */
}
#headerpic{
  margin-top: 0; /* 去掉原来的固定margin-top */
  /* 保留其他背景图样式 */
}

修改后的完整代码

CSS部分

@font-face{ font-family: 'Raleway'; src: url('../fonts/Raleway-VariableFont_wght.ttf'); } 
@font-face{ font-family: 'Lato'; src: url('../fonts/WorkSans-VariableFont_wght.ttf'); } 
*{ box-sizing:border-box; } 
html,body{ margin:0; font-family:Raleway,Lato,"Helvetica Neue",Arial,sans-serif; font-size:16px; height:10000px; padding-top: 70px; } 
/*NAVIGATIONSLEISTE*/ 
#header-nav{ top:0; position:fixed!important; width:100%; background-color:#3d3f45; height: auto; display: flex; flex-wrap: wrap; align-items: center; padding: 10px; } 
#header-nav-bild{ height:30px; width:auto; } 
#site-navigator-wrapper{ margin-left: auto; width: auto; } 
#site-navigator{ display: flex; flex-wrap: wrap; gap: 8px; } 
.navlinks-wrapper{ display:inline-block; padding: 8px 12px; } 
.navlinks{ font-size:25px; display:inline-block; } 
a.navlinks:link {color: white;text-decoration:none;} 
a.navlinks:visited{color:white;text-decoration:none;} 
a.navlinks:hover{color:#e5e5e5;text-decoration:none;} 
a.navlinks:active{color:#a62c21;text-decoration:none;} 
#activenav>a.navlinks { color:#3d3f45!important;} 
#activenav{ background-color:#e5e5e5; } 
/*HEADERBILD*/ 
#headerpic{ width:100%; height:0; padding-top:20.83%; background-image:url("https://imagizer.imageshack.com/img923/5105/jayAiI.jpg"); background-repeat:no-repeat; background-size:contain; } 
/*GRIDSYSTEM*/ 
.col{ border:1px solid #91c4ff; background-color:#bfddff; } 
.col>p{ background-color:white; margin:0; text-align:center; } 
#container{ width:100%; margin-left:auto; margin-right:auto; } 
.row::after{ content:""; clear:both; display:block; } 
.row{ height:100px; width:100%; } 
.col { float:left; min-height:1px; height:100px; padding:10px; } 
.col-1{width:16.6666%;} 
.col-2{width:33.3333%;} 
.col-3{width:50%;} 
.col-6{width:100%;} 
@media(max-width:768px){ 
  .col-1{width:50%;} 
  .col-2{width:50%;} 
  #site-navigator {
    width: 100%;
    margin-top: 10px;
  }
} 
@media(max-width:480px){ .col-1{width:100%;} .col-2{width:100%;} .col-3{width:100%;} } 
/*GRID SYSTEM NAVBAR*/ 
.navbar{ width:50%; }

HTML部分

<body> 
<!--Navigationsleiste--> 
<nav id="header-nav"> 
<a id="header-nav-bild-wrapper"class="navbar" href="index.html"><img id="header-nav-bild" src="https://imagizer.imageshack.com/img924/6999/2UQhwy.png"></a> 
<div id="site-navigator-wrapper"class="navbar"> 
<div id="site-navigator"> 
<div id="activenav"class="navlinks-wrapper"><a href="index.html" class="navlinks">Startseite</a></div> 
<div class="navlinks-wrapper"><a href="Leistungen.html" class="navlinks">Leistungen</a></div> 
<div class="navlinks-wrapper"><a href="Kontakt.html" class="navlinks">Kontakt</a></div> 
<div class="navlinks-wrapper"><a href="Impressum.html" class="navlinks">Impressum</a></div> 
</div> 
</div> 
</nav> 
<!--HeaderBild--> 
<header id="headerpic"></header> 
<!--GRIDSYSTEM--> 
<div id="container"> 
<div class="row"> 
<div class="col col-1"><p>col-1</p></div> 
<div class="col col-1"><p>col-1</p></div> 
<div class="col col-1"><p>col-1</p></div> 
<div class="col col-1"><p>col-1</p></div> 
<div class="col col-1"><p>col-1</p></div> 
<div class="col col-1"><p>col-1</p></div> 
</div> 
<div class="row"> 
<div class="col col-2"><p>col-2</p></div> 
<div class="col col-2"><p>col-2</p></div> 
<div class="col col-2"><p>col-2</p></div> 
</div> 
<div class="row"> 
<div class="col col-3"><p>col-3</p></div> 
<div class="col col-3"><p>col-3</p></div> 
</div> 
<div class="row"> 
<div class="col col-6"><p>col-6</p></div> 
</div> 
</div> 
</body>

这样修改后，导航栏会在小屏幕自动换行，灰色容器会自适应高度包裹所有导航内容，图片始终在导航的上方（大屏幕在左侧，小屏幕在顶部），完全不会出现重叠问题啦！

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

如何实现导航栏换行置于灰色容器且不与#header-nav-bild-wrapper重叠

具体修改步骤 #

修改后的完整代码 #

CSS部分 #

HTML部分 #

具体修改步骤

修改后的完整代码

CSS部分

HTML部分