背景视频盖住导航栏：层级为什么失效

全屏背景视频加上之后，顶部导航栏点不动。视觉上导航在上层，实际指针命中了视频。多数情况是样式没有生效，而不是层级数值不够。

先查语法

样式表里某条声明缺少分号、括号不配对时，从出错位置开始往后的声明会被丢弃。层级声明恰好排在后面时就会失效，导航因此落到视频之下。

层级生效的前提

• 元素必须有定位，静态定位元素上的层级不参与比较。
• 比较只在同一个堆叠上下文内进行，跨上下文比较无效。
• 父级若创建了新的上下文，子元素的数值再大也只在父级内部生效。

结构

.bg-video {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.site-nav { position: fixed; top: 0; z-index: 10; }

背景视频取负值时位于根元素背景之上、内容之下，导航保持正值即可压住。

还有一层：指针穿透

视频不需要交互时关闭指针事件，指针事件直接落到下层，不再依赖层级比较。

排查顺序

1. 在计算样式面板确认层级声明是否被解析，被划掉即为语法问题。
2. 确认元素带有定位声明。
3. 确认两者处在同一堆叠上下文。
4. 给视频关闭指针事件，排除命中问题。