安卓Chrome中sticky定位下拉导航栏覆盖video元素时无法点击

问题原因 #

1. 你给video设置的z-index未生效：z-index仅对position属性值为非static（如relative/absolute/fixed/sticky）的元素生效，你当前代码里的video默认是position: static，所以设置的z-index: 0不被层叠上下文识别。
2. 部分浏览器（尤其是移动端Safari）对原生视频控件的渲染逻辑特殊，原生控件层级默认会脱离普通DOM层叠顺序，仅靠基础z-index设置无法覆盖。
3. 导航链接无法点击是因为视频实际层叠顺序高于导航栏，点击事件被视频元素捕获，视觉上的覆盖是浏览器渲染错位导致的。

解决方案 #

1. 基础层叠顺序修复（必改）

修改对应CSS代码，给video添加position: relative让z-index生效，同时给sticky容器调高z-index并开启独立层叠上下文：

/* 修改原有video样式 */
video{
  position: relative;
  z-index: 0;
}

/* 修改原有#sticky样式 */
#sticky{
  position: sticky;
  top: 0;
  z-index: 999; /* 数值尽量调高，避免和页面其他元素层级冲突 */
  transform: translate3d(0, 0, 0); /* 强制开启硬件加速，修复浏览器层级渲染异常 */
  isolation: isolate; /* 新建独立层叠上下文，避免内部元素层级被外部影响 */
}

2. 备用兼容方案（如果上述修改后仍有问题）

如果是浏览器原生视频控件强制置顶的问题，不想自定义控件的前提下可以加滚动监听逻辑：当导航栏和视频区域重叠时，给video添加pointer-events: none属性，让点击事件穿透到上层导航栏，滚动离开重叠区域后再移除该属性即可。

内容的提问来源于stack exchange，提问作者Áron Kristóf