网站dommazzola.com视频z-index问题：按钮与文字被遮挡

我帮你排查过这个视频遮挡文本按钮的问题了，这种情况在自动播放视频的场景里特别常见，哪怕设置了z-index也容易踩坑，咱们一步步来解决：

你说初始加载时按钮可见，后来被视频挡住，大概率是这两个原因：

1. z-index 只对设置了非static定位的元素生效，如果你的.title-container、.description或者它们的父容器没加position: relative/absolute/fixed/sticky，那设置的z-index根本不会起作用。
2. 部分浏览器对<video>元素有特殊的渲染优先级，尤其是自动播放触发后，视频可能会“穿透”上层元素，哪怕父容器设置了z-index也没用。

结合你的HTML结构（.homepage-hero-module → .video-container → 视频，以及同级的文本容器），给你几个递进的解决办法：

1. 先确保层级元素的定位属性正确 #

给文本/按钮容器和视频容器都加上定位，这是z-index生效的前提：

/* 给你的文本按钮容器设置定位和高z-index */
.title-container, .description {
  position: relative;
  z-index: 10; /* 设一个明显高于视频的值 */
}

/* 视频容器设置更低的z-index */
.video-container {
  position: relative;
  z-index: 1;
}

注意：如果.homepage-hero-module这类父容器设置了z-index，也要确保它的层级不会影响子元素，最好也给它加上position: relative。

2. 直接给视频标签设置层级 #

有些浏览器会忽略父容器的z-index，直接给<video>标签设置z-index，把它压在下面：

.video-container video {
  position: relative;
  z-index: 0; /* 比文本按钮的z-index低 */
}

3. 用伪元素兜底（终极方案） #

如果上面的方法还是不行，说明视频的硬件加速导致层级穿透，给父容器加一个透明伪元素作为“隔离层”：

.homepage-hero-module {
  position: relative;
}

/* 伪元素会挡在视频上方，文本按钮再放在伪元素上方 */
.homepage-hero-module::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5; /* 介于视频和文本之间 */
  background: transparent; /* 完全透明，不影响视觉和交互 */
}

这个伪元素会强制浏览器遵循层级规则，把视频压在最底层。

4. 强制视频的硬件加速规则 #

自动播放的视频可能触发浏览器的硬件加速，导致层级异常，给视频加个transform属性强制统一渲染规则：

.video-container video {
  transform: translateZ(0);
}

修改完CSS后，用浏览器开发者工具（F12）选中视频和文本元素，查看它们的computed样式里的position和z-index，确认设置是否生效；同时可以在视频播放过程中观察元素层级变化，确保不会再出现遮挡。

内容的提问来源于stack exchange，提问作者Dominic M.