当为图片添加 filter: grayscale() 等滤镜效果时，浏览器会自动创建新的层叠上下文（stacking context），导致其脱离原有文档流层级，意外覆盖 position: fixed 的顶部栏——根本原因在于未显式设置 z-index 控制层叠顺序。
当为图片添加 `filter: grayscale()` 等滤镜效果时，浏览器会自动创建新的层叠上下文（stacking context），导致其脱离原有文档流层级，意外覆盖 `position: fixed` 的顶部栏——根本原因在于未显式设置 `z-index` 控制层叠顺序。
在 CSS 开发中，一个常见却易被初学者忽略的陷阱是：filter 属性（如 grayscale, blur, drop-shadow）会隐式触发新的层叠上下文。根据 CSS Filter Effects 规范，只要元素的 filter 值不为 none，该元素就会成为独立的层叠上下文根节点。这意味着它的层叠顺序不再仅由父容器决定，而是与同级其他层叠上下文“平级竞争”——而最终绘制顺序取决于 HTML 中的源码位置（tree order）。
在你的 Kirby 网站结构中，.fixed 导航栏（含 logo 和菜单）出现在 <header> 中，位于 DOM 树靠前位置；而 .projects 图片列表位于 <div class="right"> 内，DOM 位置靠后。当用户悬停图片触发 filter: grayscale(100%) 时，图片立即生成新层叠上下文，且因未声明 z-index，其默认层叠等级与 .fixed 元素相同（均为 auto）。此时，后出现的元素（图片）自然绘制在先出现的元素（顶部栏）之上，造成视觉上的“穿透覆盖”。
✅ 正确解决方案：主动声明 z-index，建立明确的层叠优先级
只需为所有需要“始终置顶”的固定定位元素（如导航栏、logo、侧边菜单）统一设置一个正整数 z-index，即可确保它们稳定位于其他内容（包括 filter 触发的新层叠上下文）之下或之上：
立即学习“前端免费学习笔记（深入）”；
.fixed {
position: fixed;
z-index: 1000; /* 推荐使用足够大的值，避免冲突 */
}⚠️ 注意事项：
- z-index 仅对 position 值为 relative/absolute/fixed/sticky 的元素生效；
- 不要滥用过小的 z-index（如 1 或 2），易与其他组件冲突；建议采用语义化分层（如 100 导航、1000 模态框、9999 全局提示）；
- 避免在多个嵌套 .fixed 元素上分散设置不同 z-index，应统一由最外层容器控制（例如将 .logo 和 .menu 的 position: fixed 提升至共同父级 .header-fixed，再设 z-index）；
- 若仍无效，请检查是否存在父容器设置了 transform、opacity < 1 或 will-change 等同样会创建层叠上下文的属性——它们会产生相同干扰。
? 优化后的关键 CSS 片段（推荐整合进你的 index.css）：
/* 确保所有固定定位区域拥有明确且足够的堆叠层级 */
.fixed {
position: fixed;
z-index: 1000;
}
/* 可选：为图片 hover 效果添加轻微过渡，提升体验 */
img {
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}? 额外建议：结构精简与语义强化
你当前 HTML 中存在多处重复的 <body> 标签和嵌套冗余（如 .left 内又包 .fixed）。建议重构为更清晰的布局逻辑：
<body>
<!-- 统一顶层固定区域 -->
<header class="site-header fixed">
<div class="logo">...</div>
<nav id="main-menu" class="menu">...</nav>
</header>
<!-- 主体内容区（自动避开 fixed 头部） -->
<main class="content-area">
<div class="flexbox">
<aside class="sidebar">...</aside>
<section class="gallery">
<ul class="projects">...</ul>
</section>
</div>
</main>
</body>配合 CSS 中为 main.content-area 添加 margin-top: [header-height] 或使用 scroll-margin-top 配合锚点跳转，可进一步提升滚动体验。
掌握层叠上下文的触发机制与 z-index 的作用边界，是构建健壮 UI 的关键一步。这不是“CSS bug”，而是规范设计的必然结果——理解它，你就迈过了前端布局进阶的重要门槛。
