CSS 的 z-index 仅对定位元素（即 position 值为 relative、absolute、fixed 或 sticky）生效；若父容器未建立新的层叠上下文，子元素的 z-index 将无法跨容器影响外部兄弟元素的堆叠顺序。
css 的 `z-index` 仅对定位元素（即 `position` 值为 `relative`、`absolute`、`fixed` 或 `sticky`）生效；若父容器未建立新的层叠上下文，子元素的 `z-index` 将无法跨容器影响外部兄弟元素的堆叠顺序。
在您原始代码中，.video-container 和 #content 是同级块级元素，默认按文档流顺序渲染：.video-container 先出现，#content 后出现。虽然您为 #content 设置了 z-index: 3，但该属性在未声明 position 的情况下完全无效——这是问题的根本原因。
z-index 不是“全局层级开关”，它只在同一个层叠上下文（stacking context）内起作用。而每个具有定位属性且 z-index 不为 auto 的元素，会创建独立的层叠上下文。原始代码中：
-
.video-container虽有position: relative和z-index: 0，已形成层叠上下文； -
#content缺少position，z-index: 3被浏览器忽略，实际以普通文档流元素渲染，自然位于.video-container下方（即使视觉上看似“重叠”，实为 margin 负值造成的错觉，而非真正的层叠）。
✅ 正确解法是：确保 #content 显式定位，并置于与 .video-container 同一父级层叠上下文中。
推荐结构如下（关键修改已加粗标注）：
立即学习“前端免费学习笔记（深入）”；
<div class="main-div">
<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>
<!-- 其他内容 -->
</div>
</div>对应 CSS（精简优化版）：
body { margin: 0; }
.main-div {
position: relative; /* 创建共享层叠上下文的根容器 */
}
.video-container {
width: 100%;
height: 600px;
position: relative;
z-index: 1; /* 可选：明确其基础层级 */
}
.video-container video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
.video-container .caption {
position: absolute;
top: 20px;
left: 0;
right: 0;
text-align: center;
color: #dc0000;
z-index: 2;
}
#content {
position: absolute; /* ✅ 必须添加！否则 z-index 无效 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3; /* ✅ 现在真正生效 */
background-color: #0F6;
padding: 100px;
width: 60%; /* 建议限制宽度，避免溢出 */
box-sizing: border-box;
}? 关键注意事项：
-
z-index仅对position ≠ static的元素有效（static是默认值）； - 层叠顺序由最近的共同定位祖先决定，因此将
.video-container和#content包裹在同一个position: relative的.main-div内，才能让它们的z-index在同一上下文中比较； - 避免滥用负
margin实现“覆盖”效果（如原代码中margin: -100px 20% 100px 20%），这易引发布局不稳定和响应式问题； - 若需响应式居中，
transform: translate(-50%, -50%)比纯top/left百分比更可靠； - 视频元素本身在部分浏览器中（尤其是旧版 Safari/IE）可能因硬件加速产生隐式层叠优先级，统一用
position: absolute+ 显式z-index可规避。
通过以上调整，#content 将稳定地显示在视频上方，实现预期的视觉层叠效果。
