position: absolute 使元素脱离文档流，易致遮挡或消失；需父容器设 position: relative 以控制定位参考点；relative 更安全，保持文档流占位；fixed 需配 z-index 防覆盖；text-align/vertical-align 才是文本对齐首选。
position: absolute 会让元素脱离文档流，文本/图像可能被遮挡或消失
使用 position: absolute 时，元素会从正常布局中移除，不再占据空间。如果父容器没设 position: relative，它会相对于最近的已定位祖先（或 <html>）定位，常导致位置飘移。
- 必须给父容器显式设置
position: relative，否则top/left的参考点不可控 - 若父容器高度塌陷（比如内部只有绝对定位子元素），外部文本/图像可能“叠”在它上面，看似“消失”
- 绝对定位元素默认
z-index: auto，同层叠上下文中，后写的元素会盖住先写的——不是按 DOM 顺序，而是按渲染顺序
用 position: relative 微调文本位置但不破坏行流
position: relative 是最安全的位移方式：元素仍在文档流中占位，只视觉偏移。适合按钮内图标对齐、标题下划线微调、tooltip 偏移等场景。
- 偏移量用
top/bottom/left/right，值为负数表示反向移动（如top: -4px上移） - 不要用它替代
line-height或vertical-align调整行内文本垂直对齐——会导致基线错乱，尤其混排图标和文字时 - 若对多个相邻
inline元素都用relative偏移，可能引发换行异常（浏览器按原始尺寸计算换行点）
fixed 定位文本时，滚动页面内容会从下方“穿过”它
position: fixed 让元素相对于视口固定，常见于悬浮标题、返回顶部按钮。但文本若未设背景或 z-index，滚动时会被后续内容覆盖。
- 务必搭配
z-index（如z-index: 100），且确保父容器没设transform或will-change——这些会创建新层叠上下文，使z-index失效 - 避免在
fixed元素内放长段落文本：它不随页面滚动，用户可能误以为内容被截断 - 移动端需注意：iOS Safari 中
fixed在输入框激活时可能失效，此时应降级为absolute+ 监听scroll
text-align 和 vertical-align 不是 position 的替代方案
很多人想“把文字右上角对齐”，第一反应是 position，其实多数情况用原生文本对齐更稳定。
立即学习“前端免费学习笔记（深入）”；
-
text-align: right控制块级容器内行内内容的水平对齐，不影响定位行为 -
vertical-align只对inline、table-cell、flex-item生效，对block或absolute元素无效 - 想让图像与旁边文字中线对齐？优先用
vertical-align: middle，而不是套一层relative再top: -2px——后者在不同字号下偏移量要反复调试
.caption {
display: inline-block;
vertical-align: middle; /* 比 position: relative + top 更可靠 */
}
img.icon {
vertical-align: middle; /* 图标与文字自动对齐，无需手动算像素 */
}文本排版中真正难的不是“怎么挪”，而是“挪完是否还参与布局、是否影响别人、在不同设备上是否一致”。position 是手术刀，不是胶带——用之前得清楚切哪、留多少边、会不会伤到邻近组织。
