HTML/CSS技术求助：无法在背景视频上方放置段落

数据老陈

2026-8-9

解决背景视频上方添加文字的问题

HTML结构规范

将视频与文本放入同一父容器，便于控制层级关系，同时把导航栏独立出来避免冲突：

<div class="video-container">
  <video autoplay muted loop class="background-video">
    <source src="your-video.mp4" type="video/mp4">
  </video>
  <div class="overlay-text">
    <p>这里是需要显示在视频上方的文本内容</p>
  </div>
</div>

<nav class="navbar">导航栏内容</nav>

CSS核心样式设置

父容器设为相对定位，作为子元素定位的参照：

.video-container {
  position: relative;
  width: 100%;
  height: 100vh; /* 占满视口高度，可按需调整 */
  overflow: hidden; /* 防止视频超出容器范围 */
}

背景视频设为绝对定位，铺满容器并设置较低层级：

.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让视频居中显示 */
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
}

文本容器设为绝对定位，层级高于视频，同时调整位置避免被导航栏遮挡：

.overlay-text {
  position: absolute;
  top: 60%; /* 可自定义垂直位置，避开导航栏区域 */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; /* 确保文本在视频上方 */
  color: #ffffff; /* 根据视频色调调整文字颜色，增强可读性 */
  text-align: center;
  padding: 0 20px;
}

导航栏固定定位时，给视频容器添加上边距，避免内容被覆盖：

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333333;
  color: #ffffff;
  padding: 15px;
  z-index: 10; /* 保证导航栏在最上层，但不干扰视频与文本的层级 */
}

.video-container {
  margin-top: 50px; /* 数值与导航栏高度一致，避免内容被导航栏遮挡 */
}