position: relative 只改变元素渲染位置而不影响文档流，文字仍按原占位排版；若需文字环绕或对齐，应改用 flex、float 或 vertical-align 等方案。
用 position: relative 移动元素时，为什么文字位置“没变”？
因为 position: relative 只改变元素的**渲染位置**，不改变它在文档流中原本占据的空间。文字仍按原始位置排版，看起来就像“元素飘走了，但文字没跟着动”。这不是 bug，是 CSS 的设计逻辑——它保留了布局上下文。
- 设置
top或left后，元素视觉上偏移，但父容器高度、兄弟元素位置都不受影响 - 如果想让文字“绕着移动后的元素排版”，得换思路：用
float、inline-block或现代布局（如display: grid） - 调试时可临时加
outline: 1px solid red查看元素原始占位框
真正让文字“围绕”元素对齐的替代方案
若目标是文字紧贴元素一侧（比如图标旁放说明文字），position: relative 不是首选。更直接的方式：
-
display: inline-flex或display: inline-block+ 垂直对齐：vertical-align: middle - 用
float: left（需注意清除浮动，或父容器设overflow: hidden） - 现代写法：父容器设
display: flex，子元素自动沿基线对齐，再用align-items: center
.text-with-icon {
display: flex;
align-items: center;
gap: 8px;
}
.text-with-icon img {
flex-shrink: 0;
}
top/left 数值该设多少才和文字对齐？
没有固定值，取决于字体度量（font metrics）。常见做法是结合 em 或 ex 单位微调：
-
ex是当前字体小写字母 x 的高度，常用来对齐文本基线，比px更可靠 - 例如：图标用
position: relative; top: 0.2ex;往上提一点，使其视觉中心与文字中线接近 - 避免用大数值硬调，比如
top: -5px在不同字号下会失效
容易被忽略的 baseline 对齐细节
CSS 中的“文本对齐”本质是基线（baseline）对齐，而图片、inline 元素默认按 baseline 对齐，但基线位置受 line-height、font-family 影响极大。
立即学习“前端免费学习笔记（深入）”；
- 给图片加
vertical-align: middle或vertical-align: text-bottom比调top更稳定 - 如果父容器
line-height很大，即使元素position: relative了，文字行高仍会撑开间距 - 检查 computed styles 里的
baseline位置，比肉眼判断更准
top 值，不如先确认对齐目标是“视觉居中”还是“基线对齐”，再选对应策略。 
