粘性HTML5视频z-index失效：滚动后层级异常，视频结束恢复

我做了一个上下带填充内容的页面，中间放置HTML5视频，用来模拟内容丰富页面里的视频展示效果。视频采用广告行业常用的滚动穿插效果（interscroller effect）：给视频容器设置position: sticky+bottom: 0，同时给视频设置比内容更低的z-index，原本预期视频固定在页面底部但隐藏于内容下方，滚动时随内容移动逐步露出。

但测试发现，在Safari、Chrome、Firefox（移动端和桌面端）中，滚动过视频区域后回到页面顶部，视频会显示在内容上方，完全违背了低z-index的设定；而当循环播放的视频（约10秒）结束重启时，z-index恢复正常，视频回到内容下方。我制作了极简复现示例，在线编辑器中显示正常，但保存为单文件本地打开时问题复现，推测是video元素结合position: sticky和z-index时的浏览器引擎底层bug。

修复方案 #

• 给视频容器添加伪元素占位层级
  给sticky视频容器添加::before伪元素，设置与容器一致的尺寸、position: absolute和z-index: -1，同时将视频自身的z-index设为0，强制浏览器维持层级关系：

  .video-sticky-container {
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 300px;
    position: relative; /* 让伪元素相对容器定位 */
  }
  .video-sticky-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: transparent;
  }
  .video-sticky-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  

• 手动触发浏览器重绘
  在滚动回到顶部时，通过修改视频元素的样式触发重绘，修复图层层级：

  window.addEventListener('scroll', () => {
    if (window.scrollY === 0) {
      const video = document.querySelector('video');
      // 触发重绘
      video.style.transform = 'translateZ(0)';
      requestAnimationFrame(() => {
        video.style.transform = '';
      });
    }
  });
  

• 用JS模拟sticky效果
  如果上述方法无效，可放弃原生sticky，用JS监听滚动事件动态控制视频容器的定位和层级：

  const videoContainer = document.querySelector('.video-sticky-container');
  const containerOffset = videoContainer.offsetTop;
  const containerHeight = videoContainer.offsetHeight;
  
  window.addEventListener('scroll', () => {
    const scrollPos = window.scrollY;
    if (scrollPos >= containerOffset && scrollPos <= containerOffset + containerHeight) {
      videoContainer.style.position = 'fixed';
      videoContainer.style.bottom = '0';
      videoContainer.style.zIndex = '-1';
    } else {
      videoContainer.style.position = 'relative';
      videoContainer.style.zIndex = '';
    }
  });
  

问题原因 #

浏览器对position: sticky元素有特殊的图层渲染优化，而HTML5视频由独立的媒体引擎处理，两者的图层合成逻辑可能冲突：滚动离开sticky区域再返回时，浏览器错误地将视频图层提升到内容之上；视频循环重启时，媒体引擎重新初始化视频图层，层级错乱随之修复。

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