我无法重叠视频元素。我有一个包含视频的 div。尽管我已经指定下面的 div 使用 z-index 应该更高，因此出现在视频上方，但它总是出现在视频下方。我不确定出了什么问题？
<style>
body{
margin:0;
}
.video-container {
z-index: 0;
width: 100%;
height:600px;
position: relative;
}
.video-container video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 1;
}
.video-container .caption {
z-index: 2;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
#content {
z-index: 3;
background-color:#0F6;
padding:100px;
margin: -100px 20% 100px 20%;
}
</style>
</head>
<body>
<div class="video-container">
<video autoplay muted loop>
<source src="Westgress Video.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
<div id="content">
<h1>Content for id "content" Goes Here</h1>
<p>djfghkjdf</p>
<p>kdfjhgkjdfdfgbdhfjghkjdfghjkdfhgkj</p>
<p>kjdfbgkjdfghkjdfghkjdfhgkjdfkjg</p>
<p>dfkjbhkjdfg</p>
</div>
</body>
</html>
我认为使用 z-index 意味着我可以使 #content div 出现在视频容器上方。但这不会发生。
您不需要 z-index 来执行此操作。您可以使用网格堆栈，正如CBroe所提到的，您需要设置内容的相对位置以启用定位
body {
margin: 0;
}
.video-container {
/* grid stack */
display: grid;
width: 100%;
height: 600px;
position: relative;
}
.video-container video {
/* position in grid stack */
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-container .caption {
/* position in grid stack */
grid-area: 1 / 1;
text-align: center;
color: #dc0000;
padding: 20px;
}
#content {
/* enable positioning */
position: relative;
background-color: #0F6;
padding: 100px;
margin: -100px 20% 100px 20%;
}<div class="video-container">
<video autoplay muted loop>
<source src="https://assets.codepen.io/68939/vidwp.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
<div id="content">
<h1>Content for id "content" Goes Here</h1>
</div>使用下面的代码，使用内容部分的位置样式并管理视频上的内容。目前，我添加了一个虚拟视频 URL；请用您的视频替换它。
body {
margin: 0;
}
.video-container {
z-index: 0;
width: 100%;
height: 600px;
position: relative;
}
.video-container video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 1;
}
.video-container .caption {
z-index: 2;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
.main-div {
position: relative;
}
#content {
z-index: 3;
background-color: #0F6;
padding: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="main-div">
<div class="video-container">
<video autoplay muted loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
<div id="content">
<h1>Content for id "content" Goes Here</h1>
<p>djfghkjdf</p>
<p>kdfjhgkjdfdfgbdhfjghkjdfghjkdfhgkj</p>
<p>kjdfbgkjdfghkjdfghkjdfhgkjdfkjg</p>
<p>dfkjbhkjdfg</p>
</div>
</div><style>
body {
margin: 0;
}
.video-container {
z-index: 0;
width: 100%;
height: 600px;
position: relative;
}
.video-container video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 1;
}
.video-container .caption {
z-index: 2;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
#content {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 3;
background-color: #0F6;
padding: 100px;
}
<div class="video-container">
<video autoplay muted loop>
<source src="Westgress Video.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
<div id="content">
<h1>Content for id "content" Goes Here</h1>
<p>djfghkjdf</p>
<p>kdfjhgkjdfdfgbdhfjghkjdfghjkdfhgkj</p>
<p>kjdfbgkjdfghkjdfghkjdfhgkjdfkjg</p>
<p>dfkjbhkjdfg</p>
</div>
</div>