用 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 层面可做基础兜底：
