如何在CSS/HTML中将视频设置为页面背景且不遮挡上层可交互元素

你遇到的问题核心是未明确配置定位元素的层级（z-index）。fixed定位的元素默认层级高于普通文档流元素，哪怕你给上层元素设置了position: relative，没有指定更高层级的情况下，依然会被视频元素覆盖，同时视频会拦截所有点击交互，导致上层按钮、导航无法点击。

方案1（最简写法，兼容性足够） #

直接给视频元素设置负z-index，固定到最底层，同时将html、body背景设置为透明避免遮挡：

html, body {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  /* 核心配置：层级设为负数，置于所有元素底层 */
  z-index: -999;
}

原有.nav、.logotext的position: relative配置无需改动，也不用额外设置z-index，默认就会显示在视频上方，交互也不会被拦截。

方案2（兼容性更好，推荐） #

调整DOM结构，将所有页面内容放在单独的容器中统一管理层级，无需设置负z-index，避免部分老旧浏览器兼容问题：

HTML结构调整 #

<body>
  <video autoplay muted loop id="myVideo">
    <source src="/assets/videos/circuit-board-hero.mp4" type="video/mp4">
  </video>
  <!-- 所有页面内容放入该容器 -->
  <div class="page-container">
    <!-- 原有导航、按钮、正文等内容 -->
    <div class="nav">[...]</div>
    <div>[...]</div>
  </div>
</body>

CSS配置 #

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

.page-container {
  position: relative;
  z-index: 1;
}

SASS开发优化建议 #

可以通过全局变量统一管理页面层级，避免后续维护冲突：

// 全局层级变量定义
$z-index-bg-video: 0;
$z-index-page: 1;
$z-index-nav: 10; // 导航可以设置更高层级，避免被其他内容遮挡

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: $z-index-bg-video;
}

.page-container {
  position: relative;
  z-index: $z-index-page;
}

.nav {
  position: relative;
  z-index: $z-index-nav;
}

替换为GIF背景的方法 #

逻辑完全一致，将video标签替换为img标签即可：

<img src="你的动图地址.gif" id="myGifBg" alt="背景动图">

给img设置和视频完全相同的fixed定位和z-index配置即可。

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