用 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 屏上容易错位——因为像素不是物理单位，而是逻辑单位，缩放会放大渲染，但偏移量不会自动按比例调整。
- 优先用
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几乎不闪
重叠文字排版真正难的不是“怎么叠上去”，而是叠完之后是否还受字体加载、行高计算、缩放响应、事件捕获这些底层机制影响——稍不注意，设计稿看着美，一上线就错位或卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
