页面切换时导航栏位置偏移，如何修复并实现非顶部固定？

你遇到的问题是因为用float: right定位导航栏时，布局依赖周围元素的空间，不同页面的内容差异会导致导航栏位置偏移。要实现跨页面固定导航栏位置，但滚动页面时不置顶，可以用以下两种方案：

方案一：固定高度头部容器（推荐，布局更稳定） #

给导航栏套一个固定高度的头部容器，通过flex布局控制导航栏位置，确保每个页面的头部高度一致：

修改后的HTML #

<body>
  <header class="page-header">
    <nav class="container-nav">
      <ul>
        <li class="current-page"><a href="index.html">首页</a></li>
        <li><a href="overons.html">关于我们</a></li>
        <li><a href="nieuwsberichten.html">新闻动态</a></li>
      </ul>
    </nav>
  </header>
  <!-- 页面主体内容 -->
</body>

对应的CSS #

/* 重置浏览器默认样式，消除布局差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 固定头部高度，确保跨页面布局一致 */
.page-header {
  height: 80px;
  padding: 0 20px;
  display: flex;
  align-items: center; /* 导航栏垂直居中 */
  justify-content: flex-end; /* 导航栏靠右对齐 */
  /* 可选：添加背景色，和页面风格匹配 */
  background-color: #ffffff;
}

/* 导航栏列表布局 */
.container-nav ul {
  list-style: none;
  display: flex;
  gap: 20px; /* 导航项之间的间距，可自定义 */
}

/* 导航链接样式 */
.container-nav a {
  text-decoration: none;
  color: #333333; /* 链接颜色，可自定义 */
}

/* 当前页面高亮 */
.current-page a {
  font-weight: bold;
}

方案二：绝对定位导航栏（无需修改HTML结构） #

直接通过绝对定位把导航栏固定在页面的指定位置，同时给页面主体留出空间避免遮挡：

修改后的CSS #

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  position: relative; /* 作为导航栏定位的参照 */
  padding-top: 80px; /* 避免页面内容被导航栏遮挡，值根据导航栏高度调整 */
}

.container-nav {
  position: absolute;
  top: 20px; /* 距离页面顶部的距离，可自定义 */
  right: 20px; /* 距离页面右侧的距离，可自定义 */
}

.container-nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.container-nav a {
  text-decoration: none;
  color: #333;
}

.current-page a {
  font-weight: bold;
}

这两种方案都能实现跨页面固定导航栏位置，且滚动页面时导航栏会随页面内容一起滚动，不会固定在顶部。你可以根据自己的页面整体结构选择合适的方案。

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