嗨，我来帮你搞定这两个布局问题！

1. 实现滚动时头部和导航栏均固定在顶部 #

要让两个元素都在滚动时固定在视口顶部，核心是给它们都设置 position: fixed 属性。不过直接这么做会导致重叠，所以还需要调整它们的垂直位置和层级。

2. 让导航栏紧贴头部下方，避免覆盖 #

你当前的问题是导航栏默认的 top 值为 0，和头部的位置重叠了。只需给导航栏设置对应的 top 值，再配合层级控制和内容偏移就能解决：

完整示例代码 #

/* 头部样式 */
.header {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: chartreuse;
  text-align: center;
  top: 0; /* 显式固定在视口最顶部 */
  z-index: 100; /* 确保头部在导航栏上方 */
}

/* 导航栏样式 */
.nav-bar {
  position: fixed;
  width: 100%;
  height: 40px; /* 可根据你的需求调整高度 */
  background-color: dodgerblue;
  top: 50px; /* 等于头部的高度，实现紧贴下方 */
  z-index: 99; /* 层级低于头部 */
}

/* 主内容样式 - 避免被固定栏遮挡 */
.main-content {
  margin-top: 90px; /* 头部高度(50px) + 导航栏高度(40px)，根据实际高度调整 */
  padding: 20px;
}

关键要点说明 #

• position: fixed：让元素脱离文档流，始终固定在视口的指定位置，滚动页面时不会移动。
• top 属性：精准控制垂直位置，导航栏的 top 值设置为头部的高度，就能刚好紧贴在头部下方。
• z-index：控制元素的堆叠顺序，头部的层级更高，确保不会被导航栏覆盖。
• 主内容的 margin-top：因为固定元素不占据文档流空间，所以需要给下方的内容设置顶部外边距，避免内容被固定栏挡住。

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