用position: absolute拼CSS图标需父容器设position: relative，子元素统一box-sizing: border-box，top/left按内边框基准计算，优先用px单位和transform居中，注意层叠上下文与pointer-events。
绝对定位怎么让图标元素精准拼到一起
靠 position: absolute 把多个 <span></span> 或 <div> 当像素块用，是手绘 CSS 图标的常见做法。但“拼得准”不是加个 <code>absolute 就完事——父容器没设 position: relative，所有子元素就按 body 定位，一动全乱。
- 父容器必须显式设置
position: relative（或absolute/fixed），否则top/left会相对于视口计算 - 所有参与拼图的子元素建议统一用
box-sizing: border-box，避免padding或border溢出尺寸预期 - 慎用百分比偏移（如
left: 50%），小图标里 1px 偏差就明显；优先用固定值，比如top: 2px、left: 4px
CSS图标中 top/left 的取值依据是什么
不是凭感觉拖，而是看「基准点」：top 是从父容器上边框内侧到子元素上边框内侧的距离，left 同理。这意味着如果子元素本身有 height: 8px，又设了 top: 0，那它顶部就贴着父容器上边线；若想让它垂直居中，得算：top: calc(50% - 4px)（假设父高 16px，子高 8px）。
- 用
transform: translate(-50%, -50%)配合top: 50%+left: 50%更稳妥，尤其当子元素尺寸不固定时 - 避免混用
top和bottom控制同一元素——浏览器可能按未定义行为处理，导致渲染抖动 - 调试时临时加
outline: 1px solid red到子元素，能立刻看清实际占位和偏移是否符合预期
为什么图标在不同字号下错位或变形
因为很多开发者把 width/height 写成固定像素（如 width: 6px），却把位置用 em 或 rem 表示，或者反过来。一旦父级 font-size 变，em 值变，但像素块大小不变，相对关系就崩了。
- 整套图标建议统一单位：全用
px（最可控），或全用em并确保父容器font-size固定（如font-size: 16px） - 避免对图标容器设
font-size: 0来清除 inline 元素间隙——这会让em-系单位失效，且影响可访问性 - 如果图标要响应式缩放，用
transform: scale()替代改width/height，能保持各部件间比例和定位关系
用绝对定位拼图标时最常被忽略的细节
不是定位值写错，而是忘了「层叠上下文」和「pointer-events」。比如两个重叠的形状，上面那个没设 z-index，但下面那个有 opacity: 0.99——这就意外创建了新层叠上下文，导致 z-index 失效；再比如整个图标包裹在 <button></button> 里，但某个拼图 <span></span> 被设了 pointer-events: none，点击区域就漏了一块。
立即学习“前端免费学习笔记（深入）”；
-
z-index只在已定位元素（position不为static）上生效，且只在同层叠上下文中比较 - 需要响应点击/悬停的部件，务必检查是否被父级
pointer-events: none或自身pointer-events: none拦截 - 导出为 SVG 时，这类纯 CSS 图标无法直接提取——它们本质是布局技巧，不是矢量图形，别指望用
getBBox()获取轮廓
