如何让第二个容器置于背景视频下方并实现页面滚动？

问题描述 #

我想要创建一个全屏大小的div元素，实现点击“reviews”按钮后自动滚动并锁定到该全屏div。目前遇到的问题是，添加的这个div会覆盖首页的背景视频，无法实现滚动效果。请问是否是我的CSS属性导致了覆盖而非可滚动？

我的HTML代码 #

<body>
    <div class="wrapper">
      <video id="background-video" class="video-background" autoplay loop muted>
        <source
          src="/Users/julianvazquez/Desktop/cyborgs/assets/cloudyy.mp4"
          type="video/mp4"
        />
      </video>
      <ul class="nav-area">
        <li><a href="#">Home</a></li>
        <br />
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="welcome-text" id="welcome-text">
        <h1>
          Cyber <br />
          Angels
        </h1>

        <button class="glowing-btn">
          <span class="glowing-txt"
            >Rev<span class="faulty-letter">iew</span>s</span
          >
        </button>
      </div>
    </div>

    <div>
        <h2>What are customers saying?</h2>
    </div>

  </body>

容器和body元素的CSS属性 #

#background-video {
          position:fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          object-fit: cover;
          z-index: -1;
        }

        .container{

          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          object-fit: cover;
          z-index: -1;
          
        }
html,
        body {
          height: 100%;
          width: 100%;
          overflow: hidden;
        }

        body {
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          background: black;
        }

我尝试过调整div的使用方式和顺序、修改容器属性、添加顶部内边距和外边距，但均无效果。我有一个带有闪烁效果的按钮，怀疑是其代码导致，但希望先排除body、container和背景类的问题。

问题根源与修复方案 #

核心问题 #

你的问题完全是CSS设置导致的：

1. **html, body的overflow: hidden**直接禁用了页面滚动，根本没法滚动到下方的reviews div
2. body设置为display: flex并居中对齐，会让所有子元素（包括wrapper和reviews div）都堆叠在页面中心，而非按正常文档流垂直排列，这就是reviews div覆盖背景视频的原因
3. .container类是无效代码，你在HTML里根本没用到它

分步修复 #

1. 恢复页面滚动能力

修改html和body的CSS，移除禁用滚动和强制居中的属性：

html,
body {
  height: 100%;
  width: 100%;
  /* 删掉overflow: hidden，恢复滚动 */
  margin: 0; /* 清除默认边距，避免不必要的留白 */
}

body {
  min-height: 100vh;
  /* 删掉display: flex、justify-content、align-items，回到正常文档流 */
  background: black;
}

2. 保留背景视频的固定效果

背景视频的CSS不用改，fixed定位+z-index: -1能让它固定在页面底部，不遮挡上方内容：

#background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

3. 设置全屏reviews区域并实现跳转

给reviews的div添加类名和id，设置全屏样式，同时给按钮添加锚点跳转：

修改HTML：

<!-- 给reviews区域加类名和id -->
<div class="reviews-section" id="reviews">
    <h2>What are customers saying?</h2>
</div>

<!-- 把按钮改成锚点链接，或者保留按钮用JS实现平滑滚动 -->
<a href="#reviews" class="glowing-btn">
  <span class="glowing-txt"
    >Rev<span class="faulty-letter">iew</span>s</span
  >
</a>

添加reviews区域的CSS：

.reviews-section {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8); /* 半透明背景增强文字可读性 */
  color: white;
}

4. 可选：平滑滚动效果

想要点击按钮后平滑滚动到reviews区域，加一行全局样式：

html {
  scroll-behavior: smooth;
}

5. 冗余代码清理

删掉没用的.container类CSS，减少代码冗余。

替代方案（保留按钮元素） #

如果不想把按钮改成a标签，用JS实现点击滚动：

document.querySelector('.glowing-btn').addEventListener('click', () => {
  document.getElementById('reviews').scrollIntoView({
    behavior: 'smooth'
  });
});

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