当为图片添加 filter: grayscale() 等 CSS 滤镜效果时，浏览器会自动为其创建新的堆叠上下文（stacking context），导致其 z 轴层级意外高于 fixed 定位的顶部栏；只需为固定元素显式设置 z-index 并确保其处于更高堆叠层即可修复。
当为图片添加 `filter: grayscale()` 等 css 滤镜效果时，浏览器会自动为其创建新的堆叠上下文（stacking context），导致其 z 轴层级意外高于 fixed 定位的顶部栏；只需为固定元素显式设置 `z-index` 并确保其处于更高堆叠层即可修复。
在构建响应式网站（尤其是使用 Kirby 这类轻量 CMS）时，常会用 position: fixed 实现顶部导航栏或侧边菜单，同时为内容区域（如图片画廊）添加交互效果——例如悬停灰度化（filter: grayscale(100%)）。但许多初学者会遇到一个看似矛盾的现象：图片在正常状态下显示正常，一旦鼠标悬停，图像突然“穿透”并覆盖在顶部固定栏之上。这不是浏览器 Bug，而是 CSS 堆叠上下文（stacking context）机制的必然结果。
? 根本原因：filter 触发新堆叠上下文
根据 CSS Filter Effects 规范，只要元素设置了 filter 且计算值不为 none（例如 grayscale(100%)、blur(2px)、brightness(0.8)），该元素将自动成为一个新的堆叠上下文根元素。这意味着：
- 它的 z-index 不再与父容器或其他同级元素直接比较；
- 它的子元素和自身将作为一个独立的“绘画层”参与页面绘制；
- 当多个堆叠上下文共存时，它们之间的层叠顺序由HTML 文档流中的出现顺序（tree order） 和 z-index 值共同决定。
在你的 HTML 结构中，.fixed 导航栏（含 .logo 和 .menu）出现在 <header> 中，而图片列表位于 <div class="right"> 内部，DOM 位置靠后。当图片因 :hover 创建新堆叠上下文后，若其父容器（如 .right）未形成更强的堆叠上下文，该图片的堆叠层就会被渲染在原始 .fixed 元素之上——即使 .fixed 元素本身已脱离文档流。
✅ 关键认知：position: fixed 本身不会自动创建堆叠上下文，但 z-index 值（即使是默认的 auto）会影响其在当前上下文中的层级；而 filter 会强制创建新上下文，使其“脱离”原有层级体系。
✅ 正确解决方案：显式提升固定栏的堆叠层级
最直接、可靠的方式是为所有需要始终置顶的固定定位元素（如 .fixed）显式声明 z-index，并确保其值足够高（通常 1 或 10 即可，避免过度使用大数值）：
.fixed {
position: fixed;
z-index: 10; /* ← 关键：明确声明层级，覆盖 filter 创建的新上下文 */
}⚠️ 注意事项：
- z-index 仅对定位元素（即 position 为 relative/absolute/fixed/sticky）生效；
- 若 .fixed 的某个祖先容器设置了 z-index: 0 或其他非 auto 值，它可能限制子元素的层级范围——此时应检查并移除不必要的祖先 z-index；
- 不要依赖 z-index: 9999 等“魔法数字”，优先通过语义化分层（如 .z-nav { z-index: 10; }、.z-content { z-index: 1; }）维护可读性。
? 完整修复示例（精简版）
以下是你原 CSS 的关键修正部分（已整合最佳实践）：
/* 确保所有固定元素拥有明确且一致的堆叠层级 */
.fixed {
position: fixed;
z-index: 10; /* ← 必须添加 */
}
/* 可选：为内容区域设置更低层级，增强可控性 */
.right {
position: relative; /* 避免意外触发堆叠上下文 */
z-index: 1;
}
/* 图片悬停灰度效果保持不变，无需修改 */
img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}对应 HTML 结构无需改动，但建议将 .fixed 类统一应用于所有需固定的容器（如你的 .logo 和 .menu 外层 <div class="fixed">），确保样式收敛。
? 进阶提示：预防类似问题
| 场景 | 触发新堆叠上下文的 CSS 属性 | 应对建议 |
|---|---|---|
| 悬停动效 | filter, transform, opacity < 1 | 固定元素加 z-index；内容区避免无意义 transform: translateZ(0) |
| 深度布局 | will-change: transform | 仅在真正需要性能优化时启用，并配合 z-index 管理 |
| 多层弹窗 | position: fixed + z-index 冲突 | 使用 CSS 自定义属性定义层级变量，例如 :root { --z-modal: 1000; --z-nav: 100; } |
✅ 总结
图片悬停覆盖固定栏的本质，是 CSS 堆叠上下文机制与 DOM 渲染顺序共同作用的结果。filter 不是“bug”，而是规范行为；z-index 不是“补丁”，而是层级控制的必需声明。 作为前端开发入门者，理解这一机制不仅能解决当前问题，更能帮你规避未来在模态框、下拉菜单、滚动视差等场景中的层级混乱。从今天起，为每个 position: fixed 或 position: absolute 元素显式设置 z-index，应成为你的 CSS 编码习惯之一。
