固定导航栏滚动时被<main>内容遮挡的技术问题求助

嘿，这个问题我做个人网站的时候也碰到过！其实就是两个关键点没处理到位，咱们一步步来解决：

1. 给导航栏设置堆叠层级（z-index） #

固定定位的元素默认堆叠优先级不高，很容易被后面的内容覆盖。你只需要给.nav-menu加上z-index属性，把它的层级拉到最上层就行：

.nav-menu {
  width: 100%;
  height: auto; /* 修正你之前写的`height: 0 auto`语法错误，改成auto让导航栏自适应高度 */
  margin: 0 auto;
  padding: auto;
  background-color: black;
  position: fixed;
  top: 0;
  z-index: 999; /* 新增这一行，足够大的数值能确保导航栏在页面最上层 */
}

小贴士：z-index不用设得太夸张，999就足够避开大部分页面元素的层级冲突了

2. 给<main>区域预留顶部空间 #

固定定位的导航栏脱离了文档流，页面的<main>内容会从浏览器顶部开始渲染，自然会跑到导航栏下面。你需要给<main>加上上边距，数值至少等于导航栏的实际高度：

main {
  margin-top: 50px; /* 根据你的导航栏高度调整，留50px足够容纳你的导航栏，也更美观 */
}

如果想更精确，可以根据导航栏的实际高度（比如你的li上下padding是15px，导航栏高度大概30px）设置margin-top: 30px;，效果也没问题。

做完这两步，你的导航栏就既能固定在顶部，又不会被<main>的内容遮挡啦！

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