fixed定位导航栏与页面内容重叠 内容无法滚动至导航下方求助

问题根因 #

1. 未给nav设置背景色，导航栏默认透明，滚动时内容会从透明导航下方透出，视觉上呈现重叠效果
2. 你注释掉了.articles的padding-top属性，且原有设置的128px数值可能不足以匹配导航栏的实际总高度
3. 若切换sticky定位后未生效，大概率是缺少背景色设置，或nav的父元素存在overflow: hidden/auto属性

修复方案 #

方案1：保留fixed固定定位 #

1. 先添加全局样式重置，清除浏览器默认边距

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 给nav设置不透明背景色

nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: #fff; /* 可替换为你需要的导航背景色 */
}

3. 给内容区域设置匹配导航高度的上内边距

你当前.nav-center上下内边距为2rem、标题字号2.5rem，导航总高度约为7rem，直接修改.articles的padding属性即可：

.articles {
    padding: 7rem 0 2rem; /* 上内边距匹配导航高度，不要注释 */
    width: 90vw;
    max-width: 600px;
    margin: 0 auto;
    overflow: auto;
}

方案2：改用sticky吸顶定位 #

sticky定位不会脱离文档流，不需要手动给内容加顶部内边距，修改对应样式即可：

nav {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: #fff; /* 必须设置不透明背景色 */
}

.articles {
    padding: 2rem 0;
    width: 90vw;
    max-width: 600px;
    margin: 0 auto;
    overflow: auto;
}

注意：使用sticky定位时，nav的直接父元素不能设置overflow: hidden/auto属性，否则sticky会失效。

内容的提问来源于stack exchange，提问作者emre-ozgun