如何将导航栏定位在section容器右侧且避免元素重叠？

API 探路者

2026-7-26

导航栏定位解决方案：置于section容器右侧

问题需求

作为前端新手，需要将导航栏单独定位在页面中部的<section>容器右侧。尝试使用position:absolute时出现元素重叠，现有方法无法实现预期布局。

当前代码

CSS代码

.middle-site-content-container {
  width: auto;
  height: auto;
  border: 2px red solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  margin: auto;
}

.middle-site-content-1,
.middle-site-content-2,
.middle-site-content-3,
.middle-site-content-4,
.middle-site-content-5,
.middle-site-content-6 {
  height: auto;
  width: auto;
  margin: 2rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: #f2f2f2;
  color: #333;
}

.middle-site-content-1 {
  border: red 2px solid;
}

section.middle-site-content-container img {
  display: block;
  max-width: 24rem;
  max-height: 15rem;
  height: auto;
  width: auto;
  margin: auto;
}

section.middle-site-content-container h1 {
  padding: 1rem;
  height: auto;
  margin: auto;
  max-width: 24rem;
  max-height: 15rem;
}

section.middle-site-content-container p {
  padding: 0.5rem 0.1rem 0.3rem 1.5rem;
  text-align: left;
  max-width: 24rem;
  max-height: 10rem;
  height: auto;
  margin: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.middle-site-content-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.middle-site-content-1,
.middle-site-content-2,
.middle-site-content-3,
.middle-site-content-4,
.middle-site-content-5,
.middle-site-content-6 {
  flex: 1 1 30rem;
  margin: 2rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: #f2f2f2;
  color: #333;
}

.middle-site-content-1 {
  border: 2px solid red;
}

.middle-site-content-container img {
  max-width: 100%;
  max-height: 15rem;
  margin: auto;
}

.middle-site-content-container h1 {
  padding: 1rem;
  margin: 1rem 0;
}

.middle-site-content-container p {
  padding: 0.5rem 0.1rem 0.3rem 1.5rem;
  text-align: left;
  max-height: 10rem;
  margin: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-bar-container-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 2rem;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

nav ul li {
  margin-left: 1rem;
}

HTML代码

<section class="middle-site-content-container">

  <div class="middle-site-content-1">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>ELDEN RING PATCH NOTES </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-2">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>Valorant Patch notes </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-3">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>CS go updates </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-4">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>Lol patch-notes </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-5">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>ELDEN RING PATCH NOTES </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="middle-site-content-6">
    <img src="eldenring-patchnotes-v109.jpg" alt="patch notes img">
    <h1>ELDEN RING PATCH NOTES </h1>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil minus eveniet ipsam culpa sint ducimus, corporis impedit veniam ipsa quas dignissimos modi, dolor aliquam nemo nulla itaque adipisci unde aspernatur.</p>
  </div>

  <div class="nav-bar-container-right">
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </div>

</section>

当前布局

当前布局图

预期布局

预期布局图

解决方案

方法1：Flex嵌套布局（推荐，易维护）

调整HTML结构，将内容卡片和导航栏拆分到独立容器，通过主容器的横向flex布局实现左右分布：

修改HTML结构，新增内容容器：

<section class="middle-site-content-container">
  <div class="content-cards-container">
    <div class="middle-site-content-1">...</div>
    <div class="middle-site-content-2">...</div>
    <div class="middle-site-content-3">...</div>
    <div class="middle-site-content-4">...</div>
    <div class="middle-site-content-5">...</div>
    <div class="middle-site-content-6">...</div>
  </div>

  <div class="nav-bar-container-right">
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </div>
</section>

更新CSS规则：

/* 主容器改为横向不换行布局 */
.middle-site-content-container {
  width: auto;
  height: auto;
  border: 2px red solid;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: auto;
  align-items: flex-start;
}

/* 内容容器占据左侧所有可用空间，保留原有卡片布局 */
.content-cards-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* 导航栏固定宽度，顶部对齐 */
.nav-bar-container-right {
  width: fit-content;
  margin: 2rem;
  align-self: flex-start;
}

/* 导航纵向排列，匹配预期图 */
nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
}

nav ul li {
  margin: 0.5rem 0;
}

方法2：Absolute定位（不修改HTML结构）

给主容器添加相对定位，让导航栏基于容器定位，同时给内容区域预留右侧空间避免重叠：

/* 主容器设置相对定位，作为导航的定位参考 */
.middle-site-content-container {
  width: auto;
  height: auto;
  border: 2px red solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  margin: auto;
  position: relative;
  padding-right: 10rem; /* 预留导航空间 */
}

/* 导航栏绝对定位到容器右侧顶部 */
.nav-bar-container-right {
  position: absolute;
  top: 2rem;
  right: 2rem;
}

/* 导航纵向排列 */
nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
}

nav ul li {
  margin: 0.5rem 0;
}

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

如何将导航栏定位在section容器右侧且避免元素重叠？

问题需求 #

当前代码 #