本文详解如何修复因 position: fixed 和 overflow: hidden 导致的页面无法滚动、后续内容被遮盖的问题，通过移除干扰布局的 CSS 属性，使背景视频保持全屏展示，同时确保下方容器可自然滚动并正确定位。
本文详解如何修复因 `position: fixed` 和 `overflow: hidden` 导致的页面无法滚动、后续内容被遮盖的问题，通过移除干扰布局的 css 属性，使背景视频保持全屏展示，同时确保下方容器可自然滚动并正确定位。
在构建单页网站（如带全屏背景视频的首页）时，一个常见误区是：为实现“视频铺满视口”而过度使用 position: fixed，却忽略了它会将元素完全脱离文档流——这意味着后续 HTML 元素不再感知其占据的空间，导致内容叠加而非顺序排列；更关键的是，若同时设置 html, body { overflow: hidden }，则整个页面滚动能力被禁用，用户无法向下浏览。
要解决这个问题，核心在于分离视觉覆盖与布局控制：
✅ 正确做法：
- 背景视频仍需全屏显示，但不依赖 position: fixed；改用 position: absolute + 容器 position: relative，或直接利用 width/height: 100vh/vw 配合 object-fit: cover，使其视觉上铺满，同时保留在文档流中（或通过父容器控制）；
- 移除 html, body { overflow: hidden } —— 这是页面无法滚动的直接原因；
- 确保 有足够高度（如 min-height: 100vh），且后续区块（如 ）自然流式排布，不设 position: fixed 或 z-index 干扰层叠顺序。
What are customers saying?
以下是修正后的关键 CSS（已剔除问题属性）：
#background-video {
/* 移除 position: fixed */
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
z-index: -1;
/* 建议添加：确保视频不阻挡交互 */
pointer-events: none;
}
/* .container 类未在 HTML 中出现，疑似冗余，建议删除或重命名后合理使用 */
/* 若需包裹视频及文字，应设为 relative 容器 */
.wrapper {
position: relative;
min-height: 100vh; /* 保证容器至少一屏高 */
}
html,
body {
height: 100%;
width: 100%;
/* 移除 overflow: hidden → 恢复默认可滚动行为 */
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: black;
/* 注意：display: flex + justify/align 会使子元素居中，可能影响后续区块定位；
建议仅对 .wrapper 应用 flex 居中，body 保持 block 流式布局 */
}
HTML 结构保持清晰语义化，无需额外包裹：
<div class="wrapper">
<video id="background-video" class="video-background" autoplay loop muted><source src="your-video.mp4" type="video/mp4"></source></video><!-- 导航与欢迎文案 --><ul class="nav-area">...</ul>
<div class="welcome-text">...</div>
</div>
<!-- 此区块将自然位于 .wrapper 下方，可滚动到达 -->
<section id="reviews" class="reviews-section"><h2>What are customers saying?</h2>
<!-- 后续评论内容 -->
</section>
? 重要注意事项：
- 若仍需“点击按钮平滑滚动至评论区”，请为 #reviews 添加 ID，并配合 JavaScript 或原生锚点链接（如 Reviews），并启用 scroll-behavior: smooth：
html { scroll-behavior: smooth; } - 避免对 .wrapper 或 body 设置 height: 100vh 后再添加内容——这会导致内容被截断；应使用 min-height: 100vh 保证首屏高度，同时允许内容自然延展。
- 测试时务必清空浏览器缓存，确保新 CSS 生效；可临时添加 border: 2px solid red 到 #reviews 查看其实际位置与尺寸。
总结：布局问题往往源于对 position 和 overflow 的误用。记住——fixed 用于悬浮层（如导航栏），absolute 用于相对定位，而常规内容应依赖文档流（static/relative）+ 尺寸控制实现预期布局。修复这两处 CSS，你的“Reviews”区块就能稳稳落在背景视频之下，随页面自然滚动呈现。
