用 position: relative 偏移文字时点击区域错乱，因其不脱离文档流，视觉偏移但事件区域仍在原位；应改用 transform: translate() 以保持交互准确且性能更优。

用 position: relative 偏移文字时，为什么重叠后点击区域错乱？

因为 position: relative 不脱离文档流，元素仍占据原始位置的空间，视觉上偏移了，但点击/选中/无障碍焦点还在原处。用户点“上面那行字”，实际触发的是底下那行的事件。

• 解决方法：对需要交互的文字加 pointer-events: none（仅当纯展示无交互）
• 若需保留点击，改用 transform: translate() —— 它不影响布局和事件区域，且硬件加速更顺滑
• 别混用 top/left 和 transform，会导致渲染行为不一致（尤其在 Safari 中）

多个文字层叠时，z-index 为什么没生效？

z-index 只对「已定位元素」（即 position 为 relative、absolute、fixed 或 sticky）起作用。只设 z-index 而没设 position，等于没写。

• 每个要参与层叠的文字容器必须同时有 position: relative 和 z-index
• 注意层叠上下文：父容器若设了 opacity、transform 或 filter，会创建新层叠上下文，子元素的 z-index 只在该上下文内有效
• 数值不用太大，z-index: 1、2、3 足够，避免后期维护时陷入“谁该写999”的混乱

如何让重叠文字在高 DPI 屏幕或缩放下保持对齐？

用像素值（如 top: -2px）手动偏移，在 125% 缩放或 Retina 屏上容易错位——因为像素不是物理单位，而是逻辑单位，缩放会放大渲染，但偏移量不会自动按比例调整。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 优先用 em 或 rem：比如 top: -0.1em，它随字体大小缩放，更稳定
• 或用 transform: translateY(-10%)，百分比基于自身尺寸，响应性更好
• 避免在 @media 中为不同 dpr 单独写偏移值——维护成本高，且现代浏览器对 transform 的 subpixel 渲染已足够可靠

用 relative + top/left 实现错位，和用 transform 的性能差别在哪？

两者都能实现视觉错位，但浏览器处理方式完全不同：top/left 触发 layout + paint，transform 通常只触发 composite（尤其是 translate），重绘开销小得多。

立即学习“前端免费学习笔记（深入）”；

• 滚动或动画中频繁偏移文字？必须用 transform，否则卡顿明显
• top/left 在静态排版里问题不大，但一旦加 hover 动画，就容易触发 layout thrashing
• 实测：Chrome DevTools 的 Rendering 面板勾选 “Paint flashing”，能直观看到 top 偏移引发大片红色重绘，transform 几乎不闪

重叠文字排版真正难的不是“怎么叠上去”，而是叠完之后是否还受字体加载、行高计算、缩放响应、事件捕获这些底层机制影响——稍不注意，设计稿看着美，一上线就错位或卡死。