当使用 rotate 属性旋转图像时，若未正确管理层叠顺序（z-index），图像可能因默认堆叠上下文而覆盖固定/粘性导航栏；本文详解通过合理设置 z-index 和定位上下文来确保旋转元素不破坏页面布局。
当使用 `rotate` 属性旋转图像时，若未正确管理层叠顺序（z-index），图像可能因默认堆叠上下文而覆盖固定/粘性导航栏；本文详解通过合理设置 `z-index` 和定位上下文来确保旋转元素不破坏页面布局。
在 CSS 中，transform: rotate()（或现代简写 rotate: Xdeg）本身不会改变元素的文档流位置，但它会基于元素的原始边界框进行视觉变换。问题的关键在于：旋转后的视觉区域虽偏移，其占据的“堆叠层级”仍由父容器和自身 z-index 决定。若 .toolbar 使用 position: sticky 但未显式声明 z-index，而 .intro img 又处于一个隐式创建新堆叠上下文的环境中（例如父元素有 transform、opacity < 1 或 will-change），就极易导致旋转图像“穿透”导航栏——看似“重叠”，实则是层叠顺序失控。
✅ 正确解决方案：显式控制堆叠层级
最直接有效的方式是为导航栏容器（.toolbar）赋予明确且足够高的 z-index，同时确保其父级具有定位上下文（sticky 已满足），并避免旋转图像意外创建更高层级的堆叠上下文。
1. 为工具栏添加 z-index
在你的 CSS 中，只需为 .toolbar 添加一行：
.toolbar {
position: sticky;
top: 0;
z-index: 1000; /* 推荐值：高于普通内容，无需夸张如 9999 */
/* 其余原有样式保持不变 */
}? 为什么不是 9999？
虽然 z-index: 9999 在示例中能工作，但过度使用高数值不利于可维护性。1000 已远高于默认（auto 相当于 0），且为后续可能的弹窗（z-index: 2000）、提示框等预留了清晰层级空间。
2. 确保旋转图像不意外提升层级
检查 .intro 或其祖先元素是否含有以下 CSS 属性（它们会隐式创建新的堆叠上下文，使内部元素的 z-index 相对于该上下文计算，而非全局）：
立即学习“前端免费学习笔记（深入）”；
- transform（除 none 外）
- opacity（小于 1）
- filter（非 none）
- will-change: transform
- isolation: isolate
例如，若你后续给 .intro 添加了 transform: translateY(0)，就会使其成为新的堆叠上下文根节点，此时 #frame1 的 z-index 将只在 .intro 内部生效——无法与 .toolbar 比较。因此，除非必要，避免在导航栏同级或父级容器上使用上述属性。
3. 完整修正后的关键 CSS 片段
/* 修正：为 toolbar 显式指定 z-index，并确保其定位生效 */
.toolbar {
position: sticky;
top: 0;
z-index: 1000; /* 关键修复 */
height: 60px;
display: flex;
justify-content: space-evenly;
background-color: wheat;
}
/* 保持旋转效果，但移除潜在干扰（可选优化） */
#frame1 {
height: 300px;
rotate: 5deg; /* 建议用小角度（如 2–5deg）更自然 */
/* 不要在此处加 z-index —— 它应低于 toolbar */
}
#frame2 {
height: 300px;
margin-left: -100px;
rotate: -3deg;
}⚠️ 注意事项与最佳实践
- z-index 仅对定位元素生效：position 必须为 relative/absolute/fixed/sticky，static（默认）下 z-index 无效。
- 避免 margin-top: -20px 等负边距“挤占”导航空间：你当前 #logo 的 margin-top: -20px 会导致 .header 实际高度与视觉不符，建议改用 transform: translateY(-20px) 或调整 align-items。
- 响应式兼容性：rotate 是现代语法（Chrome 104+/Firefox 112+ 支持），如需兼容旧版，回退至 transform: rotate(5deg)。
- 性能提示：大量旋转动画建议添加 will-change: transform，但静态旋转无需添加，否则可能触发不必要的图层提升。
通过以上调整，旋转图像将严格遵循层叠规则：.toolbar 始终位于最上层，.intro 及其子图像在其下方渲染，视觉旋转不再影响布局秩序——既保持设计感，又保障 UI 稳定性。
