用position修复提示文字需确保父容器设position:relative且足够高，用transform微调位置更稳定，控制max-width和white-space防换行错乱，z-index失效时检查层叠上下文。
提示文字被遮挡或错位时怎么用 position 修复
表单中 <label></label> 或 <span class="hint"></span> 类提示文字常因父容器 overflow: hidden、position: relative 或浮动布局被裁切，直接加 position: absolute 很可能失效——因为定位基准是最近的「已定位祖先」，不是表单本身。
- 先检查提示元素的父级是否意外设置了
position: relative且高度不足（比如height: 0或padding: 0） - 若提示需贴着输入框右下角，不要只设
bottom: 0; right: 0，得确保其父容器有position: relative且足够容纳它 - 避免对
<input>直接设position: relative后再放绝对定位提示——输入框本身不是语义上的容器，容易破坏可访问性
top/left 数值调不准？优先用 transform 微调
用像素值硬写 top: 8px 看似简单，但字体大小、行高、边框粗细一变，提示就偏了。更稳的方式是结合 transform 做相对偏移：
.form-item {
position: relative;
}
.form-hint {
position: absolute;
bottom: -20px;
left: 0;
transform: translateX(4px); /* 比 left: 4px 更稳定，不触发重排 */
}-
transform不影响文档流，不会挤开其他元素 - 数值用
px或em都行，但别混用：left: 1em; transform: translateX(2px)容易失准 - 如果提示要居中于输入框下方，用
left: 50%; transform: translateX(-50%)，比算宽度更可靠
响应式下提示文字换行错乱怎么办
小屏幕里一行放不下提示文字，white-space: nowrap 会溢出，word-break: break-word 又可能在不该断的地方切词。关键是控制容器行为：
- 给提示元素设
max-width: 100%，并搭配box-sizing: border-box - 用
min-width: fit-content防止在宽屏下被无故拉伸（尤其配合left: 0; right: 0时） - 如果提示需始终单行显示，加
overflow: hidden; text-overflow: ellipsis，但必须同时设white-space: nowrap和固定宽度（或max-width）才生效
为什么 z-index 没用？定位层级常见陷阱
提示文字被其他元素盖住，加 z-index: 999 还是无效，大概率是没理解层叠上下文（stacking context）。常见原因：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
opacity 、<code>filter、transform，会创建新层叠上下文，子元素的z-index只在该上下文内生效 -
<select></select>、<iframe></iframe>在部分浏览器中天然高于普通元素，绝对定位提示无法覆盖它们 - 没给提示元素的父容器设
position，导致z-index被忽略（z-index对static元素无效）
真正需要压住其他内容时，与其盲目堆 z-index，不如把提示挂到 下，用 JS 动态计算位置——但这已是中级方案，初级项目里更应检查布局结构是否合理。
