ruby标签不支持position: absolute，强行设置会破坏语义和渲染逻辑，导致注音错位或不可见；应使用ruby-position、ruby-align、font-size与line-height等专用css属性控制定位，或改用div模拟方案。
ruby 标签本身不支持 position: absolute，强行设置会破坏其语义结构和浏览器默认渲染逻辑，导致注音错位、换行异常或完全不可见。
ruby 元素不能直接设为 absolute 的原因
ruby 是内联级语义化标签（<ruby><rb>汉</rb><rt>hàn</rt></ruby>），浏览器对其有专用排版引擎：rt 必须紧贴 rb 垂直对齐，且整个 ruby 行为受 ruby-position 和 ruby-align 控制。一旦给 <ruby></ruby> 或其子元素设 position: absolute，它就脱离了内联上下文，rt 不再能找到对应的 rb，渲染引擎放弃自动对齐逻辑，结果往往是 rt 悬浮在左上角或消失。
- Chrome/Firefox/Safari 均不保证绝对定位下
<rt></rt>与<rb></rb>的绑定关系 -
ruby-position: over或under在绝对定位后失效，因为定位参考系已不再是文本行 - 即使手动用
top/left调整<rt></rt>，不同字号、行高、字体下偏移量无法通用
想微调 ruby 注音位置，该用什么替代方案
真正可控又兼容的做法是放弃绝对定位，改用 CSS 内联排版控制：
- 用
ruby-position: over（默认）或under控制注音方向 - 用
ruby-align: center/start/end调整注音在 rb 上的水平对齐 - 用
line-height和font-size协同控制 rb 与 rt 的垂直间距（rt 默认 font-size 是 rb 的 50%，可覆盖） - 如需局部偏移，给
<rt></rt>设transform: translateY(-2px)，比top更安全，不触发脱离文档流
示例：
<ruby style="ruby-position: over;"><rb>漢</rb><rt style="font-size: 0.6em; transform: translateY(-1px);">hàn</rt></ruby>
非要“绝对定位式”自由摆放注音？那就别用 ruby
如果业务场景要求注音块完全脱离文字流（比如悬浮提示、拖拽标注、叠加在 Canvas 上），ruby 就不是合适工具。此时应改用普通 div 模拟：
- 用
<div class="ruby-sim"> <span class="rb">漢</span><span class="rt">hàn</span> </div> - 给
.rt设position: absolute，父容器.ruby-sim设position: relative - 自行用
top/left或transform定位，但失去语义、无障碍支持和自动换行适配 - 需手动处理响应式缩放、多字对齐、中日韩混排等 ruby 原生支持的功能
真正难的不是让注音“看起来在某处”，而是让它在不同字体、字号、DPI、读屏软件下依然准确传达语义——这点上，原生 <ruby></ruby> 远比手写 absolute 定位可靠。别为了视觉自由牺牲可访问性底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
