如何在HTML中将动图与视频置于多条竖线后方（内联CSS实现）

核心修改思路 #

• 用定位层级实现竖线在前景、媒体内容在后方的视觉效果
• 修复原代码中的语法错误，保证媒体正常播放
• 统一容器布局，避免浮动导致的排版混乱

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
/* 全局默认样式重置 */
body {
  margin: 0;
  padding: 0;
}

/* 竖线样式 */
.verticle-line {
  width: 5px;
  min-height: 1920px;
  background: black;
  margin: 5px;
  float: left;
}

/* 媒体内容容器（作为底层） */
.content {
  position: relative;
  width: 1080px;
  height: 1920px;
}

/* 竖线容器（覆盖在媒体上方） */
#wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

/* 媒体元素样式统一 */
.content img, .content video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
</head>
<body>
<!-- 媒体内容容器 -->
<div class="content">
  <img src="test1.gif" alt="ballerina">
  <video id="test" controls width="1080" autoplay muted>
    <source src="test1.mp4" type='video/mp4'>
  </video>
</div>

<!-- 竖线容器 -->
<div id="wrapper">
  <div class="verticle-line"></div>
</div>

<script>
// 动态生成竖线
for(let x=0; x<=70; x++) {
    var vertical = document.createElement('div');
    vertical.className = "verticle-line";
    document.getElementById('wrapper').appendChild(vertical);
}
</script>
</body>
</html>

关键说明 #

1. 层级控制：通过position: absolute和z-index让竖线容器#wrapper覆盖在媒体内容.content上方，实现媒体在竖线后方的效果
2. 语法修复：修正了原视频标签中width"1080"的语法错误，补充为width="1080"；用object-fit: cover保证媒体元素填满容器
3. 播放优化：给视频添加muted属性，解决大部分浏览器自动播放需要静音的限制，确保视频能正常自动播放
4. 布局统一：将媒体元素放入相对定位的容器，避免浮动导致的排版错位，同时保证竖线容器能完全覆盖媒体区域

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