用 position: absolute 定位提示框时，父容器必须设为 relative，否则提示框会相对于视口定位而飘至左上角；z-index 需配合 position 才生效；推荐用 opacity + visibility 实现淡入淡出动画。
用 position: absolute 定位提示框时，父容器必须是 relative
直接对提示框设 position: absolute 无效，是因为它会相对于最近的「已定位祖先元素」（即 position 值为 relative、absolute、fixed 或 sticky 的父级）计算偏移。若找不到，就回退到初始包含块（通常是视口），导致提示框飘到页面左上角。
所以必须给提示框的直接父容器（比如按钮、输入框的包装 div）加上：
.trigger-wrapper {
position: relative;
}常见错误：只给提示框加 absolute，忘了父级；或父级用了 display: inline 却没意识到它无法作为定位上下文。
z-index 生效的前提是元素已定位
z-index 对 static 元素完全无效。即使你写了 z-index: 9999，只要提示框没设 position（哪怕只是 position: relative），它就不会按层叠顺序参与渲染。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
.tooltip {
position: absolute;
z-index: 1000; /* 必须配合 position 才生效 */
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
}- 不要依赖父容器的
z-index传递——子元素的层叠上下文由其自身position + z-index决定 - 避免全局乱设高
z-index（如 999999），容易引发后续覆盖冲突 - 如果提示框被其他组件遮挡，先检查遮挡方是否意外创建了新的层叠上下文（比如有
opacity 或transform）
让提示框自动避开边缘，不被裁切
纯靠 top/left 固定值容易在小屏幕或靠近边界时被容器裁掉。真正简洁的做法是结合 JS 动态判断，但 CSS 层面可做基础兜底：
- 用
max-width: 240px防止过宽撑破布局 - 加
overflow: hidden和white-space: nowrap; text-overflow: ellipsis;处理长文本 - 边框和背景用
box-shadow替代厚重描边，视觉更轻量 - 避免用
bottom+top同时设值——它们不会“智能选一个”，而是top优先生效
关键细节：transform: translateX(-50%) 比 left: -50% 更安全，后者依赖元素自身宽度，而前者基于自身尺寸计算，兼容性更好且不易偏移。
隐藏/显示提示框时，别只靠 display: none
单纯切 display 会导致过渡动画失效（display 不可动画）。要支持淡入淡出，得用：
.tooltip {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.tooltip.show {
opacity: 1;
visibility: visible;
}注意：visibility: hidden 保留占位，display: none 完全脱离文档流——如果你用的是 absolute 提示框，两者视觉差异不大，但 visibility 更利于动画衔接。
另外，移动端点击触发提示框时，记得加 touch-action: none 防止 iOS 上出现延迟或误判。
最常被忽略的一点：提示框内容如果含链接或按钮，一定要确保 pointer-events: auto（默认是继承的，但万一父级设了 none 就点不到了）。
