移动端导航栏层级异常：页面内容未被红色导航栏遮挡求助

问题根源是导航栏的层级（z-index）未正确配置，且需确保导航栏为非静态定位元素（z-index仅对position值为relative/absolute/fixed/sticky的元素生效）。

具体修改步骤 #

1. 找到你的.nav-links CSS规则，补充以下属性：

   .nav-links {
       position: relative; /* 若导航栏是固定顶部布局，也可使用position: fixed */
       z-index: 10; /* 设置比内容区域更高的层级值，确保导航栏在上层 */
   }
   

   • 若使用position: fixed，需给页面主内容区域添加顶部内边距（如padding-top: 60px），避免内容被固定导航栏完全遮挡。
2. 确认内容容器（包含h1、段落、按钮的区域）的z-index值小于导航栏的z-index（可直接不设置，默认层级低于带z-index的定位元素）。

补充说明 #

• 定位元素的z-index数值越大，显示层级越高，会覆盖下方层级更低的元素。
• 若导航栏用position: absolute，需给它的父容器添加position: relative，确保导航栏的定位上下文正确，避免脱离正常布局流引发其他问题。

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