HTML中如何将文字、图标定位在video视频背景上方

你遇到的内容无法叠在视频上方的核心原因是 z-index仅对设置了非static定位的元素生效，你现有代码中.hero-title、.hero-btm-area只设置了z-index，没有添加定位属性，因此层级规则不生效。

以下是完全符合你需求的最优实现方案，兼容你指定的video引入方式，修改后即可实现内容全部浮在视频背景上方：

CSS修改补充 #

.hero {
    position: relative;
    height: 500px;
    overflow: hidden; /* 避免视频超出容器范围 */
    background: #333; /* 视频加载前/加载失败的兜底背景 */
}
/* 新增video专属样式 */
#vid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证视频等比例铺满容器，不会拉伸变形 */
    z-index: 1; /* 视频层级放在最底层 */
}
/* 给内容容器加定位和层级，全局确保所有内容都在视频上方 */
.hero > .container {
    position: relative;
    z-index: 10;
}
.hero-title {
    position: relative; /* 新增属性，让z-index规则生效 */
    z-index: 20;
    color: white;
    text-align: center;
    margin-top: 50px;
    text-shadow: 0px 0px 7px rgb(0, 0, 0);
}

.hero-btm-area {
    position: relative; /* 新增属性，让z-index规则生效 */
    margin-bottom: 50px;
    z-index: 20;
    text-shadow: 0px 0px 7px rgb(0, 0, 0);
}

.hero-icon {
    width: 40px;
    margin-bottom: 10px;
}

HTML修改 #

把原有代码里的.hero-bg-img空容器直接替换为你需要的video标签即可：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="hero">
  <div class="container h-100 d-flex flex-column">
    <div class="row">
      <div class="col">
        <div class="hero-title">
          <h1>Hero Title</h1>
        </div>
      </div>
    </div>
    <div class="row mt-auto hero-btm-area">
      <div class="col text-white text-center border-right border-white">
        <div class="hero-icon mx-auto">
          **Icon**
        </div>
        Feature One
      </div>
      <div class="col text-white text-center border-right border-white">
        <div class="hero-icon mx-auto">
          **Icon**
        </div>
        Feature Two
      </div>
      <div class="col text-white text-center">
        <div class="hero-icon mx-auto">
          **Icon**
        </div>
        Feature Three
      </div>
    </div>
  </div>
  <!-- 替换原有空容器为video标签 -->
  <video width="1920" height="1000" autoplay muted loop playsinline id="vid">
    <source src="my-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>
<script>
    document.getElementById('vid').play();
</script>

注意：如果需要兼容移动端自动播放，必须保留muted属性，这是所有移动端浏览器的强制策略要求。

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