本文讲解如何修复因 position: fixed 和 overflow: hidden 导致的页面无法滚动、后续内容被背景视频遮盖的问题，通过移除关键 CSS 属性实现内容自然流式布局与垂直滚动。
本文讲解如何修复因 `position: fixed` 和 `overflow: hidden` 导致的页面无法滚动、后续内容被背景视频遮盖的问题，通过移除关键 css 属性实现内容自然流式布局与垂直滚动。
在构建全屏背景视频页时，一个常见误区是为视频元素设置 position: fixed 并配合 z-index: -1，意图将其“固定”为底层背景——这虽能实现视觉覆盖效果，但会将视频完全脱离文档流，导致其后的所有 HTML 元素（如 <div><h2>What are customers saying?</h2></div>）失去参考基准，从而叠加在视频上方，而非在其下方自然排列。更关键的是，html, body { overflow: hidden } 会直接禁用整个页面的滚动能力，使用户无法访问后续内容。
要让第二容器（如客户评价区）真正位于背景视频下方且可滚动访问，需同时解决两个核心问题：
✅ 移除视频的 position: fixed
保留 #background-video 的尺寸控制（width: 100vw; height: 100vh; object-fit: cover），但取消 position: fixed 和 top/left 偏移。此时视频作为普通块级元素，占据其所在文档流位置，后续元素将自动在其后渲染。
✅ 启用页面滚动
删除 html, body { overflow: hidden }，并确保 body 拥有足够高度以支持内容延伸。min-height: 100vh 仍需保留以保证首屏高度，但不再阻止溢出滚动。
以下是修正后的关键 CSS 片段：
/* ✅ 移除 position: fixed，让视频参与文档流 */
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
z-index: -1; /* z-index 在非定位元素上无效，可省略 */
}
/* ✅ 移除 .container 的 fixed 定位（原文中该类未在 HTML 出现，属冗余配置） */
/* 若需全屏容器，请用普通 block 布局替代 */
.wrapper {
position: relative; /* 确保内部绝对定位元素有参照 */
min-height: 100vh;
}
/* ✅ 启用滚动：移除 overflow: hidden */
html,
body {
height: 100%;
width: 100%;
/* overflow: hidden ← 删除此行 */
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: black;
margin: 0; /* 防止默认 body margin 干扰布局 */
}对应 HTML 结构保持语义清晰即可（注意：.wrapper 应包裹视频及首屏内容，而第二容器需置于其外）：
<body>
<!-- 首屏区域：含背景视频与欢迎文案 -->
<div class="wrapper">
<video id="background-video" class="video-background" autoplay loop muted>
<source src="your-video.mp4" type="video/mp4" />
</video>
<ul class="nav-area">...</ul>
<div class="welcome-text">...</div>
</div>
<!-- ✅ 第二容器：自然位于 wrapper 下方，可滚动到达 -->
<div class="reviews-section" id="reviews">
<h2>What are customers saying?</h2>
<!-- 此处添加评价内容 -->
</div>
</body>? 额外建议：
- 为实现点击“Reviews”按钮平滑滚动至第二容器，可添加 JS 或原生锚点跳转：
<button onclick="document.getElementById('reviews').scrollIntoView({ behavior: 'smooth' })"> Reviews </button> - 若需视频始终铺满视口且不随滚动偏移（如“固定背景”效果），应使用 position: fixed，但必须将后续内容用 padding-top: 100vh 或 margin-top: 100vh 推离首屏，而非依赖文档流顺序——这是另一种设计模式，需权衡可访问性与交互逻辑。
最终效果：页面恢复垂直滚动，用户可自然向下浏览视频之后的内容，结构清晰、语义正确、兼容性强。
