使用 position: relative 和 line-height 可实现文字浮动定位，1. position: relative 使文字相对原位置偏移而不影响布局，2. line-height 控制行高实现垂直居中，3. 结合两者可在输入框等场景实现占位文字上浮效果，4. 注意避免重叠并合理设置无单位 line-height 以提升适配性。
在CSS中实现文字浮动定位，可以使用 position: relative 结合 line-height 的方式，控制文字在行内垂直对齐或相对偏移位置。这种方法常用于微调文字与其他元素的对齐关系，比如图标与文字居中、按钮内文字上浮等场景。
1. position: relative 的作用
position: relative 会让元素相对于其正常文档流中的位置进行偏移。通过设置 top、bottom、left、right 值，可以调整元素的位置，但不会影响其他元素的布局。
对于文字内容，可以将文本包裹在 span 或其他内联元素中，然后对其应用 relative 定位，实现精细控制。
示例：.text-highlight {
position: relative;
top: -5px;
color: red;
}
立即学习“前端免费学习笔记（深入）”；
这样可以让某段文字向上偏移5px，产生“浮动”视觉效果。
2. line-height 控制垂直对齐
line-height 决定了行内内容的高度和垂直居中表现。当容器高度固定时，设置 line-height 等于容器高度，可以使单行文字垂直居中。
结合 relative 定位，可以在居中的基础上再做微调，实现“浮动”或“悬停”文字效果。
常见用法：- 让文字在固定高度的 div 中垂直居中
- 配合图标使用，使文字略高于或低于基线
- 创建表单标签中“上浮”的占位符（placeholder）效果
3. 实际应用场景：输入框占位文字上浮
当用户点击输入框时，原本在输入框内的 placeholder 文字可以上移到角落，这种效果可通过 relative + line-height 实现。
基本结构：
CSS 样例：
.input-group {
position: relative;
height: 50px;
line-height: 50px;
}
.placeholder-label {
position: relative;
left: 15px;
color: #999;
transition: all 0.3s;
}
.input-field:focus + .placeholder-label,
.input-field:not(:placeholder-shown) + .placeholder-label {
top: -20px;
left: 5px;
font-size: 12px;
line-height: 20px;
}
这里利用了 relative 让 label 向上移动，同时调整 line-height 配合新的字体大小，形成自然的“浮动”动画。
4. 注意事项与技巧
使用 relative 和 line-height 实现文字浮动时，注意以下几点：
- line-height 数值建议使用无单位（如 1.5），以保证在不同字号下可继承正确
- relative 定位不会脱离文档流，适合做小范围偏移
- 若需要更复杂的动画，可结合 transform: translateY()，减少对布局的影响
- 避免过度依赖 top/bottom 偏移导致文字重叠或可读性下降
基本上就这些。通过合理运用 position: relative 和 line-height，可以轻松实现文字的浮动定位效果，尤其适用于UI细节优化。不复杂但容易忽略的是对 line-height 与容器高度的匹配控制。
