当使用 CSS rotate 属性旋转图像时，若未正确管理层叠顺序（z-index），旋转后的图像可能因脱离正常文档流或堆叠上下文错位而覆盖固定/粘性导航栏；本文详解如何通过合理设置 z-index 与堆叠上下文，确保旋转图像不遮挡导航栏。
当使用 css `rotate` 属性旋转图像时，若未正确管理层叠顺序（z-index），旋转后的图像可能因脱离正常文档流或堆叠上下文错位而覆盖固定/粘性导航栏；本文详解如何通过合理设置 `z-index` 与堆叠上下文，确保旋转图像不遮挡导航栏。
在 Web 布局中，transform: rotate()（或现代简写 rotate()）本身不会改变元素的文档流位置，但会触发其创建新的局部堆叠上下文（stacking context）。一旦该图像位于比导航栏更低的层叠层级（即更小的 z-index 值），即使视觉上它被“抬高”，其渲染层仍可能被导航栏下方的内容穿透——尤其当导航栏使用 position: sticky 或 position: fixed 时，极易出现图像“穿透”并覆盖导航栏的视觉错乱。
根本原因在于：z-index 仅在具有定位属性（position ≠ static）的同级兄弟元素间生效，且受父级堆叠上下文约束。你的 .toolbar 已设 position: sticky，但未声明 z-index，因此其堆叠层级由浏览器默认规则决定（通常较低）；而 .intro 中的图像虽无显式 position，但 rotate() 会隐式触发 transform 堆叠上下文，在某些渲染条件下优先级反超未定义 z-index 的工具栏。
✅ 正确解法是显式、有层次地控制堆叠顺序：
- 为 .toolbar 显式添加足够高的 z-index（如 999 或 1000），确保其始终处于最上层；
- 若需对 .intro 或图像进一步分层，为其设置更低但明确的 z-index（如 1 或 10），避免依赖默认值；
- 关键补充：为 .toolbar 添加 will-change: transform 或确保其拥有独立堆叠上下文（可通过 isolation: isolate 或 transform: translateZ(0) 辅助），防止子元素意外提升层级。
以下是修复后的关键 CSS 片段（仅展示需修改部分）：
立即学习“前端免费学习笔记（深入）”；
/* ✅ 为工具栏显式设置高 z-index，并强化堆叠上下文 */
.toolbar {
position: sticky;
top: 0;
height: 60px;
display: flex;
justify-content: space-evenly;
background-color: wheat;
z-index: 1000; /* 确保始终置顶 */
isolation: isolate; /* 可选：显式创建独立堆叠上下文 */
}
/* ✅ 为图像容器（.intro）设置明确的、低于工具栏的 z-index */
.intro {
border: solid;
display: block;
background-color: white;
z-index: 1; /* 必须小于 .toolbar 的 1000 */
position: relative; /* 触发 z-index 生效（必需！） */
}
/* ✅ 图像保持 rotate，无需额外 transform-origin 调整（除非需精确定位） */
#frame1 {
height: 300px;
rotate: 5deg; /* 建议使用小角度（如 2–5deg）避免大幅偏移 */
}
#frame2 {
height: 300px;
margin-left: -100px;
rotate: -3deg;
}⚠️ 注意事项：
- z-index 必须配合 position（如 relative/sticky/fixed）才能生效。.intro 原为 display: block 且无 position，因此需补上 position: relative 才能使 z-index: 1 有效；
- 避免滥用过大的 z-index（如 9999），推荐采用语义化层级：1000（导航栏）、100（模态框）、10（内容区）、1（基础图像）；
- 若旋转后图像边缘明显溢出容器，可结合 overflow: hidden 在 .intro 上裁剪，或使用 transform-origin 微调旋转中心点；
- 测试时建议在 Chrome DevTools 的 Layers 面板中查看实际堆叠结构，验证层级是否符合预期。
总结：图像旋转引发的覆盖问题，本质是 CSS 堆叠上下文管理缺失。通过为导航栏设置高 z-index + 显式 position + 为内容区设置低但明确的 z-index 与 position，即可稳健解决。这不是 rotate 的缺陷，而是对 CSS 渲染层模型的必要尊重。
