当使用 CSS rotate() 旋转图片时，元素虽视觉上倾斜，但其原始文档流位置与层叠上下文未更新，易覆盖固定定位的导航栏；根本解法是合理设置 z-index 并确保父容器形成正确的堆叠上下文。
当使用 css `rotate()` 旋转图片时，元素虽视觉上倾斜，但其原始文档流位置与层叠上下文未更新，易覆盖固定定位的导航栏；根本解法是合理设置 `z-index` 并确保父容器形成正确的堆叠上下文。
在 Web 布局中，transform: rotate()（或现代简写 rotate: Xdeg）仅改变元素的视觉呈现，不会影响其在文档流中的几何占位（即 bounding box 仍按原始矩形计算），更不会自动调整其层叠顺序（stacking order）。因此，当 .toolbar 使用 position: sticky（本质依赖 position: -webkit-sticky / position: sticky，在某些场景下会隐式创建堆叠上下文），而下方 .intro 中的图片仅做旋转却未显式声明层叠层级时，浏览器可能按 DOM 顺序或默认堆叠规则渲染——导致旋转后的图片“穿透”导航栏，造成视觉重叠。
✅ 正确解决方案：显式控制堆叠上下文
关键在于为导航栏（.toolbar）和旋转图片分别设定明确、可比较的 z-index，并确保它们处于同一堆叠上下文中（即不被中间某个 z-index 非 auto 的祖先意外隔离）。
1. 为导航栏设置高 z-index
在现有 CSS 中为 .toolbar 添加 z-index，确保它始终位于内容层之上：
.toolbar {
top: 0px;
position: sticky;
height: 60px;
display: flex;
justify-content: space-evenly;
background-color: wheat;
z-index: 1000; /* 推荐值：足够高，避免冲突 */
}⚠️ 注意：z-index 仅对定位元素（position 为 relative/absolute/fixed/sticky）生效。.toolbar 已设 position: sticky，因此 z-index 可用。
立即学习“前端免费学习笔记（深入）”；
2. （可选）为旋转图片设置更低的 z-index
若 .intro 或图片本身需明确置于导航栏之下，可为其添加 position: relative 并设较低 z-index：
.intro {
border: solid;
display: block;
background-color: white;
position: relative; /* 启用 z-index */
z-index: 1; /* 必须 < .toolbar 的 z-index */
}
#frame1 {
height: 300px;
rotate: 50deg;
position: relative; /* 若需单独控制层级 */
z-index: 0; /* 确保不高于 toolbar */
}✅ 最佳实践：通常只需提升导航栏层级即可，无需降低内容层——除非存在多层复杂覆盖关系。
3. 避免常见陷阱
- 不要滥用超大数值（如 9999）：虽能“临时奏效”，但不利于维护和协作；推荐语义化分层（如 100 导航栏、10 主内容、1 装饰元素）。
- 检查父容器是否意外创建新堆叠上下文：若 .intro 或 设置了 opacity
- sticky 的兼容性补充：position: sticky 在旧版 Safari 中需加 -webkit-sticky，且要求父容器有明确高度/滚动约束；若导航栏异常脱离视口，可临时改用 position: fixed 测试是否为 sticky 行为问题。
完整修复后关键 CSS 片段
/* 修复导航栏层级 */
.toolbar {
position: sticky;
top: 0;
z-index: 1000; /* 核心修复 */
}
/* 确保内容区域不意外提升层级 */
.intro {
position: relative;
z-index: 1;
}
#frame1, #frame2 {
height: 300px;
rotate: 50deg; /* 或使用 transform: rotate(50deg) 兼容旧浏览器 */
}✅ 总结：CSS 旋转本身不引发重叠，真正原因是缺失显式的层叠秩序管理。通过为定位导航栏赋予合理 z-index，即可在不改动 HTML 结构、不引入 JavaScript 的前提下，彻底解决旋转图片覆盖导航栏的问题——这是现代 CSS 布局中必须掌握的基础层叠控制技能。
