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%20Video.mp4" type="video/mp4"></source></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 class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<!-- 其他内容 -->
</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 将稳定地显示在视频上方，实现预期的视觉层叠效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
