当页面添加全屏背景视频后，固定定位的导航栏失效、无法点击，根本原因常是 css 语法错误（如缺失分号）导致 z-index 等关键样式被浏览器忽略，使视频元素意外覆盖导航层。
当页面添加全屏背景视频后，固定定位的导航栏失效、无法点击，根本原因常是 css 语法错误（如缺失分号）导致 z-index 等关键样式被浏览器忽略，使视频元素意外覆盖导航层。
在你的 HTML 结构中，<video></video> 元素直接置于 内，且未设置定位或层级控制；而 .header 使用 position: fixed 并声明了 z-index: 1001，本应位于最上层。但实际失效的关键隐患藏在 CSS 中：
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 19px 20px;
background: #DCdCdC /* ❌ 缺少分号！ */
z-index: 1001; /* ⚠️ 此行被浏览器完全忽略 */
}由于 background: #DCdCdC 后缺少分号，CSS 解析器将后续的 z-index: 1001; 视为同一声明的非法值，直接丢弃该规则。结果：.header 实际 z-index 退化为默认值 auto，失去堆叠上下文优先级，被后渲染的 <video></video> 元素（天然具有较高层叠顺序）覆盖——即使视频未显式设 z-index，其文档流位置和渲染顺序仍会遮挡下方 fixed 元素。
✅ 正确写法（务必补全分号）：
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 19px 20px;
background: #DCdCdC; /* ✅ 补上分号 */
z-index: 1001; /* ✅ 现在生效 */
}⚠️ 额外建议（增强健壮性）：
- 为
<video></video>显式添加position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;，确保它作为纯粹背景层，明确处于导航栏之下； - 避免依赖隐式层叠顺序，所有参与定位的元素都应显式声明
z-index； - 使用现代开发者工具（如 Chrome DevTools 的「Computed」面板）实时验证
z-index是否真实生效，而非仅看 CSS 源码。
修复分号后，刷新页面即可恢复导航栏可点击性——无需额外 JS 或复杂 hack。记住：CSS 中一个看似微小的语法疏漏，往往就是交互失效的根源。
