网页视频遮罩文字本地正常，上传后布局错位问题求助

我之前也碰到过一模一样的情况！本地预览好好的，一部署到服务器就出问题，其实核心原因特别简单：你设置的z-index根本没真正生效。

问题根源 #

z-index这个属性有个关键前提：只有当元素的position属性不是默认的static时（比如relative、absolute、fixed、sticky），它才会发挥调整层级的作用。你给.header-content加了z-index: 2，但这个元素的定位是默认的static，所以这条样式等于白写了。

再看你的视频容器.fullscreen-video-wrap，它是position: absolute，会脱离正常文档流“浮”在页面上层；而.header-content作为静态定位元素，会老老实实待在文档流里，自然就跑到视频下方了。

修复方案 #

只需要给.header-content添加上position: relative，让z-index能正常生效即可：

.header-content {
  z-index: 2;
  position: relative; /* 新增这一行就能解决问题 */
}

为什么本地和服务器表现不一样？ #

这大概率是本地浏览器的缓存或者渲染差异导致的——有些浏览器可能会对静态元素的堆叠顺序做特殊处理，但服务器环境下的浏览器会严格遵循CSS标准，所以原本隐藏的问题就暴露出来了。

额外检查点（可选） #

如果修复后还是有问题，可以再确认两点：

• 视频元素本身有没有设置z-index，如果有的话确保它的值小于.header-content的z-index
• 有没有其他父元素的overflow或者position属性干扰了堆叠上下文

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