当使用 CSS rotate 旋转图片时，元素仍保留在文档流原始位置的“占位框”中，但视觉渲染区域可能溢出并覆盖上方的 sticky 导航栏；解决关键在于合理控制层叠顺序（z-index）与定位上下文。
当使用 css `rotate` 旋转图片时，元素仍保留在文档流原始位置的“占位框”中，但视觉渲染区域可能溢出并覆盖上方的 sticky 导航栏；解决关键在于合理控制层叠顺序（`z-index`）与定位上下文。
在 CSS 中，transform: rotate()（或现代简写 rotate()）仅改变元素的视觉呈现，并不会影响其在文档流中的几何占位——也就是说，浏览器仍按旋转前的尺寸和位置计算布局、碰撞检测与层叠关系。因此，当 被旋转后，其渲染后的视觉边界可能向上延伸，恰好与 position: sticky 的 .toolbar 发生层叠冲突：若 .toolbar 未显式声明 z-index，它将默认处于 auto 层级，在某些 stacking context 下反而被旋转后的图片“盖住”。
✅ 正确解法：主动管理层叠上下文
核心原则是：为导航栏（.toolbar）创建明确的、更高层级的堆叠上下文，确保其始终位于旋转内容之上。
1. 为 .toolbar 添加 z-index 并确认其定位生效
由于 z-index 仅对定位元素（position 值为 relative/absolute/fixed/sticky）有效，而你的 .toolbar 已设置 position: sticky，只需补充 z-index 即可：
/* Div containing the entire toolbar */
.toolbar {
top: 0px;
position: sticky;
height: 60px;
display: flex;
justify-content: space-evenly;
background-color: wheat;
z-index: 1000; /* 显式声明高优先级层叠值 */
}⚠️ 注意：z-index: 9999（如示例所用）虽有效，但属过度设计。推荐使用语义化、可维护的数值（如 1000 表示“UI 覆盖层”，10 表示“内容层”），避免未来扩展时陷入数值竞赛。
立即学习“前端免费学习笔记（深入）”；
2. （可选）为旋转图片设置更低的 z-index
若页面存在多层浮动内容，可进一步强化控制：
#frame1 {
height: 300px;
rotate: 5deg; /* 推荐使用标准 transform: rotate(5deg) 以兼容旧浏览器 */
z-index: 1; /* 确保低于 .toolbar */
position: relative; /* z-index 需要定位上下文 */
}
#frame2 {
height: 300px;
margin-left: -100px;
rotate: -3deg;
z-index: 1;
position: relative;
}? 关键细节：z-index 必须配合 position: relative（或其他非 static 值）才生效。
默认为 position: static，因此直接加 z-index 无效——务必同时添加 position: relative。
3. 进阶建议：避免意外层叠干扰
- 检查父容器是否创建了新的 stacking context：例如 .intro 若设置了 opacity
- 优先使用 transform: rotate() 替代实验性 rotate 属性：rotate 是 transform 的语法糖，但部分旧版浏览器（如 Safari
✅ 最终验证步骤
- 在 DevTools 中检查 .toolbar 计算样式，确认 z-index: 1000 和 position: sticky 均生效；
- 检查 #frame1 是否同时具有 position: relative 和 z-index: 1；
- 滚动页面，观察 sticky 导航栏是否稳定停留在顶部且不被旋转图片穿透。
通过显式定义层叠顺序与定位上下文，即可在保留优雅旋转效果的同时，彻底解决导航栏被覆盖的问题——这不仅是 CSS 旋转的典型陷阱，更是理解 stacking context 机制的重要实践案例。
