HTML/CSS设置背景视频后body内元素无法显示在视频上层问题求助

问题核心原因 #

该问题是层叠上下文与定位层级设置错误导致的，你此前应该是给header单独设置了更高的层级属性，却没有将背景视频放到整个页面布局的最底层，才会出现只有header内元素能显示在视频上方的情况。

可直接落地的解决方案 #

1. 基础全局样式重置 #

首先清除默认边距，确保body/html没有不透明背景遮挡视频：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  min-height: 100vh;
  background: transparent; /* 禁止给body设置不透明背景色 */
}

2. 背景视频样式设置 #

将视频直接作为body的第一个直接子元素，设置固定定位+负层级，固定在页面最底层：

.fullscreen-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* 保证视频铺满屏幕不变形 */
  z-index: -1; /* 核心：将视频层级压到所有普通流元素下方 */
}

3. 页面结构调整 #

不需要把所有内容塞进header，直接按正常语义化结构放在body内即可，所有普通流元素默认层级都会高于z-index为负的视频：

<body>
  <!-- 视频放在最前面 -->
  <video class="fullscreen-bg-video" autoplay muted loop playsinline>
    <source src="你的视频路径.mp4" type="video/mp4">
  </video>
  <!-- 正常布局内容 -->
  <header>
    导航、标题等头部内容
  </header>
  <main>
    作品集展示、个人介绍等主体内容
  </main>
  <footer>
    页脚内容
  </footer>
</body>

常见踩坑排查 #

• 不要给视频套多余的父容器，如果必须嵌套，不能给父容器设置transform、opacity < 1、filter等会创建新层叠上下文的属性，否则视频的负层级只会相对于父容器生效，无法压到整个页面的底层。
• 如果你有其他需要悬浮的固定/绝对定位元素，给它设置z-index: 1及以上即可正常显示在视频上方。
• 不要给body设置overflow: hidden，避免后续内容滚动被截断。

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