屏幕高度缩小时页面顶部内容被fixed导航栏遮挡的原因咨询

1. 固定导航栏脱离文档流引发布局重叠 #

你的导航栏使用了position: fixed定位，这个属性会让元素脱离正常文档流，不再占据页面的布局空间。下方的.welcome-section会从浏览器视口的最顶端开始渲染，而固定的导航栏会悬浮在它上方，直接遮挡.welcome-section的顶部内容。

2. 100vh高度设置加剧遮挡问题 #

.welcome-section设置了height: 100vh，它的高度被固定为当前浏览器视口的高度。当屏幕高度较小时，导航栏本身存在一定高度（比如导航文字的行高、内边距等），.welcome-section的实际可展示区域会被导航栏“占用”顶部部分空间。

当视口高度小于.welcome-section内部内容的总高度时，页面会出现垂直滚动条。但由于.welcome-section是从视口顶端开始布局的，即使滚动到最顶部，被导航栏遮挡的那部分内容也无法显示，只能看到.welcome-section中靠下的区域，也就是你遇到的“导航栏下方显示页面底部内容”的现象。

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