### [背景视频盖住导航栏：层级为什么失效](https://www.huociguo.com/article/1637)

**Published:** 2026-10-01T13:14:39

**Author:** 米了

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

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

![电脑屏幕上显示的代码](https://api.huociguo.com/wp-content/uploads/2026/10/e8.jpg)

层级与指针命中是两件独立的事

## 先查语法

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

## 层级生效的前提

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

## 结构

```
.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.  给视频关闭指针事件，排除命中问题。

**Tags:** z-index失效, 定位上下文, 导航栏点击, 层级覆盖, 背景视频

**Categories:** HTML5

---