本文详解如何修复因 position: fixed 和 overflow: hidden 导致的布局覆盖问题，使背景视频保持全屏展示，同时确保后续内容（如“客户评价”区域）自然位于其下方、可滚动访问。
本文详解如何修复因 `position: fixed` 和 `overflow: hidden` 导致的布局覆盖问题，使背景视频保持全屏展示，同时确保后续内容（如“客户评价”区域）自然位于其下方、可滚动访问。
在构建单页网站时，常需设置一个全屏背景视频作为首屏（Homescreen），再通过平滑滚动进入后续内容区块（如客户评价区）。但许多开发者会遇到：第二段
始终“消失”或“被遮盖”，无法正常显示和滚动——这通常并非 HTML 结构错误，而是关键 CSS 属性误用所致。
核心问题有两个：
#background-video { position: fixed }
fixed 定位将视频完全脱离文档流，使其不占据任何高度空间。浏览器会将其视为“悬浮层”，后续所有元素均从视口顶部开始渲染，造成视觉叠加而非上下排列。html, body { overflow: hidden }
此声明直接禁用整个页面的滚动能力，即使内容高度超出视口，用户也无法向下滚动查看后续区块。
✅ 正确解法是：
- 移除 #background-video 的 position: fixed，改用 position: absolute 或保留默认静态定位，并确保其父容器 .wrapper 具备相对定位上下文；
- 删除 overflow: hidden，恢复默认滚动行为；
- 为 .wrapper 设置 min-height: 100vh 并启用 position: relative，既保证首屏占满视口，又为后续内容留出真实布局空间。
以下是推荐的精简、可靠 CSS 方案：
/* 背景视频：脱离文档流但不阻断布局流 */
#background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
/* 首屏容器：提供定位上下文 + 占满视口 */
.wrapper {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
/* 移除所有 overflow: hidden；恢复自然滚动 */
html, body {
margin: 0;
padding: 0;
height: auto; /* 不再强制 100% */
overflow-x: hidden; /* 可选：禁用横向滚动 */
}
body {
background: black;
font-family: system-ui, sans-serif;
}
同时，确保 HTML 结构语义清晰，首屏与次屏逻辑分离：
<!-- 首屏：含视频、导航、标题与按钮 -->
<div class="wrapper">
<video id="background-video" autoplay loop muted><source src="your-video.mp4" type="video/mp4"></source></video><ul class="nav-area">...</ul>
<div class="welcome-text">...</div>
</div>
<!-- 次屏：自然位于首屏下方，可滚动到达 -->
<div class="section reviews-section" id="reviews">
<h2>What are customers saying?</h2>
<!-- 评论内容 -->
</div>
⚠️ 注意事项：
- 若仍需点击按钮滚动至 #reviews，请配合 JavaScript 使用 element.scrollIntoView({ behavior: 'smooth' })；
- 避免给 .wrapper 或 body 设置 height: 100vh（会截断内容），应使用 min-height: 100vh；
- z-index: -1 可安全保留，但前提是父元素有 position: relative/absolute/fixed，否则无效；
- 测试时建议在 Chrome DevTools 中临时禁用 position 和 overflow 相关样式，快速验证是否为根源问题。
最终效果：背景视频全屏铺底、首屏内容居中展示、点击“Reviews”按钮后平滑滚动至下方独立区块——结构清晰、语义合理、兼容性强，真正实现“视频在上，内容在下，滚动自如”。
