用 position: relative 是因为既能保持文档流稳定，又可通过 top 或 transform 实现微位移，避免 absolute 脱离流导致父容器高度失效、float 引发塌陷等问题。
为什么用 position: relative 而不是 absolute 或 float
Mac 桌面图标那种“微微错落、轻盈堆叠”的感觉，本质是视觉层叠 + 微位移 + 环境阴影，不是物理遮挡。用 absolute 会让图标完全脱离文档流，父容器无法自适应高度，网格排列容易错位；float 则会引发外边距合并、塌陷等问题，hover 时加阴影或上浮极易溢出。而 position: relative 既保留文档流位置（保证 Grid/Flex 布局稳定），又能通过 top 或 transform: translateY() 实现可控偏移，且不破坏兄弟元素布局。
实操建议：
- 所有图标统一设 position: relative，不设 z-index 初始值（默认为 auto）
- 悬停时只提升 z-index: 10，避免全局层级混乱
- 若需模拟“前排图标略大”，用 transform: scale(1.02)，别改 width/height（会触发重排）
box-shadow 怎么调才像 Mac 那种干净通透的悬浮
Mac 风格阴影的关键不是“重”，而是“准”：浅色背景上极淡、边缘柔和、带轻微偏移，模拟顶光+短距离离屏。直接套用 0 4px 12px rgba(0,0,0,0.15) 会发灰、显脏。
实操建议：
- 默认状态用双层阴影模拟环境光： box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.03)
- hover 时改为： box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 6px 16px rgba(0,0,0,0.05)
- 所有数值用整数（避开 0.5px），模糊半径不低于 3px（否则 Retina 屏不可见）
- 别给父容器设 overflow: hidden，否则阴影被裁，堆叠感全失
悬停上浮动画卡顿或跳变？检查这三处
鼠标移入时图标“啪”地弹起、移出时瞬间回落，说明过渡没锚定在轻量属性上。浏览器对 box-shadow 的重绘开销比想象中高，尤其叠加多层时。
实操建议：
- transition 必须写在默认状态，且只列关键属性：transition: box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
- 即便没用 transform，也得写进去——强制创建合成层，启用 GPU 加速
- 加 will-change: transform, box-shadow 提示浏览器提前优化（但别滥用，仅用于高频交互元素）
- 绝对不要写 transition: all 0.25s，它会让 background-color、border 等意外参与动画，拖慢首帧
移动端点击无反馈？:hover 在触摸设备上根本不可靠
iOS Safari 和 Android Chrome 对 :hover 的支持是“伪激活”：首次点击后临时生效一次，之后失效。纯 div 图标在手机上点十次，阴影大概率纹丝不动。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 方案一（推荐）：把图标容器换成 <button type="button" class="icon"></button>，加 cursor: pointer 和 outline: none（但保留 :focus-visible 样式供键盘用户）
- 方案二：用 JS 监听 touchstart，动态添加 .is-hovered 类，CSS 写 .icon.is-hovered { ... }
- 别依赖 @media (hover: hover)，iOS 上多数机型直接忽略该媒体查询
真正难的不是调出那层阴影，而是让所有设备都“信”这个悬浮——它得在 Retina 屏不糊、在低端安卓不卡、在手指点按后立刻响应。参数可以抄，但过渡锚点、硬件加速提示、触控降级路径，漏掉任何一环，Mac 那种轻盈感就变成了廉价浮雕。
