如何修复元素显示在视频层级下方而非布局下方的问题？

问题原因 #

你的视频元素设置了position: absolute，绝对定位的元素会脱离正常文档流，不会占据布局空间。同时，绝对定位元素的堆叠层级（z-index）默认高于正常流中的元素，所以即便<p>在HTML结构上位于视频之后，也会被视频遮挡。

另外，父容器#contain虽然是position: relative，但因为内部的绝对定位元素不占空间，容器本身高度为0，导致后续的<p>元素会向上移动到视频所在的位置，进一步被遮挡。

修复方案 #

方案1：让父容器占据视频高度（推荐） #

给父容器#contain添加height: 100vh，让容器占据视频的高度，后续元素会自然排在容器下方，完全符合正常布局逻辑：

#contain {
  position: relative;
  height: 100vh; /* 新增：让容器占据视频高度 */
}

video {
  object-fit: fill;
  height: 100vh;
  width: 100%;
  object-fit: cover;
  position: absolute;
}

#img {
  height: 100vh;
  width: 100%;
  display: flex;
  z-index: 2;
  position: absolute;
  justify-content: center;
  align-items: center;
}

方案2：降低视频的堆叠层级 #

给视频元素设置z-index: -1，让它跑到正常流元素的下方，这样后续的<p>就会显示在上面：

video {
  object-fit: fill;
  height: 100vh;
  width: 100%;
  object-fit: cover;
  position: absolute;
  z-index: -1; /* 新增：降低视频层级 */
}

注意：这个方法需要确保父容器#contain没有设置背景色，否则视频会被父容器背景盖住。

方案3：提升后续元素的堆叠层级 #

给<p>元素设置position: relative和更高的z-index，同时设置margin让它避开视频区域：

p {
  position: relative;
  z-index: 3; /* 高于视频层级 */
  margin-top: 100vh; /* 让元素在视频下方显示 */
}

这个方法需要手动调整位置，不如方案1自然。

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