当为图片添加 filter: grayscale() 等 css 滤镜效果时，浏览器会自动为其创建新的堆叠上下文（stacking context），导致其无视原有 dom 顺序与 z-index 层级，意外覆盖 position: fixed 的顶部栏。根本解法是显式提升固定栏的堆叠层级。
当为图片添加 filter: grayscale() 等 css 滤镜效果时，浏览器会自动为其创建新的堆叠上下文（stacking context），导致其无视原有 dom 顺序与 z-index 层级，意外覆盖 position: fixed 的顶部栏。根本解法是显式提升固定栏的堆叠层级。
在 CSS 布局中，position: fixed 元素本应稳定悬浮于页面最上层，但一旦其下方的元素（如图片）应用了 filter、transform、opacity < 1 等属性，就会触发隐式堆叠上下文创建——这是 CSS 规范明确定义的行为（见 CSS Filter Effects Level 1 和 CSS 2.1 堆叠顺序）。此时，该图片及其父容器将脱离原有文档流的绘制层级，形成一个独立的“绘图层”，其默认 z-index: auto 使其在同级堆叠上下文中按 HTML 树序（即后出现者在上）覆盖先出现的元素——尽管顶部栏在 HTML 中更早声明，却因未建立更强的堆叠优先级而被遮挡。
✅ 正确解决方案：主动为固定定位容器设置 z-index
你已在 CSS 中定义了 .fixed { position: fixed; }，但缺少关键的 z-index 声明。只需为其赋予一个明确的正整数值（如 z-index: 100），即可确保其堆叠层级高于所有未显式指定 z-index 或 z-index: auto 的后续元素：
.fixed {
position: fixed;
z-index: 100; /* 关键：强制提升堆叠层级 */
}⚠️ 注意事项：
- z-index 仅对 定位元素（position 为 relative/absolute/fixed/sticky）生效，普通 static 元素忽略该属性；
- 若多个 .fixed 元素（如顶部 logo 和侧边菜单）共存，建议按视觉层级差异化设置 z-index（例如 .logo { z-index: 110; }，.menu { z-index: 105; }），避免相互遮挡；
- 避免使用过大的 z-index（如 9999），推荐采用语义化阶梯值（100, 200, 300），便于后期维护；
- 不要依赖 z-index: 0 或负值来“压低”内容——这可能引发不可预期的嵌套堆叠行为。
? 进阶建议：隔离滤镜作用域
若项目中需频繁使用 filter 动画，可进一步通过 isolation: isolate 主动创建独立堆叠上下文，使滤镜效果不干扰外部层级关系：
.projects img {
transition: filter 0.3s ease;
}
.projects img:hover {
filter: grayscale(100%);
isolation: isolate; /* 显式隔离，增强可控性 */
}最后，请检查 HTML 结构是否合理嵌套。当前代码中存在重复 <body> 标签及冗余 <head> 闭合标签，虽不影响 z-index 行为，但可能干扰浏览器解析。建议清理为标准结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $site->title() ?></title>
<?= css('index.css') ?>
</head>
<body>
<!-- header & flexbox 内容 -->
</body>
</html>通过显式声明 z-index 并理解堆叠上下文的生成机制，你不仅能解决当前的重叠问题，更能建立起对 CSS 层级渲染逻辑的深层认知——这是构建健壮、可维护前端界面的关键基础。
