CSS固定导航栏问题：设置main上外边距导致导航栏下移

问题原因 #

1. 导航栏虽设置了position:fixed，但未指定top:0，初始定位位置仍沿用它在文档流中的默认位置。而.main的margin-top触发了外边距塌陷，导致页面容器整体下移，导航栏的初始位置也随之偏移。
2. 导航栏设置width:100%同时加了padding:10px，默认盒模型下width仅计算内容宽度，padding会额外增加元素总宽度，导致水平方向超出视口。

修复后的代码 #

CSS部分

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 让padding包含在width内，避免水平溢出 */
}

body {
  font-family: 'Titillium Web', sans-serif;
}

nav {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  box-shadow: 0 0 10px;
  position: fixed;
  width: 100%;
  top: 0; /* 强制固定在页面顶部 */
  left: 0; /* 对齐视口左侧 */
  background-color: white; /* 避免滚动时内容透过导航栏显示 */
}

.pages-container p {
  display: inline;
  margin: 0 35px;
  font-size: 20px;
}

.pages-container .last {
  margin-right: 0;
}

nav .title {
  font-size: 20px;
}

.main {
  margin-top: 60px; /* 根据导航栏实际高度调整，确保内容不被遮挡 */
}

HTML部分（无需修改）

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

<nav>
  <p class="title">Portfolio Willem</p>
  <div class="pages-container">
    <p>Economie</p>
    <p>Bedrijfseconomie</p>
    <p>Wiskunde A</p>
    <p class="last">Geschiedenis</p>
  </div>
</nav>
<div class="main">
  <p>test content</p>
  <p>test content</p>
  <!-- 其余内容省略 -->
</div>

关键修复点 #

• 全局添加box-sizing:border-box，统一盒模型规则，避免padding导致的布局溢出。
• 给固定定位的导航栏设置top:0和left:0，彻底脱离文档流，固定在页面顶部。
• 调整.main的margin-top为导航栏实际高度，保证内容不会被导航栏遮挡。

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