提示框超出屏幕本质是绝对/固定定位元素脱离视口边界且未受约束，overflow:hidden对其无效，因其不参与父容器文档流；须用JS动态修正位置并配合CSS兜底。
提示框超出屏幕，本质是定位元素脱离视口边界后没做约束。直接加 overflow: hidden 没用——它只对容器自身内容起作用，而 position: absolute 或 fixed 的提示框根本不在父容器的“内容流”里。
为什么 overflow 对提示框无效
提示框通常用 position: absolute 或 position: fixed 脱离文档流，它的定位参考是最近的定位祖先或视口，不参与父容器的溢出计算。哪怕父容器设了 overflow: hidden，只要提示框没被包裹在该容器内（即没成为它的子元素），就完全不受影响。
- 常见错误：给弹出按钮的父
div加overflow: hidden，但提示框是挂载到body下的 -
transform、top/left偏移量过大时，会直接飞出视口右下角 - 响应式断点切换后，原计算的位置可能失效，导致部分遮挡或完全不可见
用 getBoundingClientRect() 动态修正位置
纯 CSS 无法读取视口尺寸和元素实际位置，必须靠 JS 判断并调整。核心逻辑是：获取提示框 DOM 的 getBoundingClientRect()，对比 window.innerWidth 和 window.innerHeight，再反向修正 top / left。
- 优先检查
right是否超限：rect.right > window.innerWidth→ 改为左对齐（left = rect.left - width + offset） - 再检查
bottom：rect.bottom > window.innerHeight→ 改为上对齐（top = rect.top - height - gap） - 避免反复触发重排：把计算逻辑节流（
throttle）或仅在首次显示/窗口 resize 时执行 - 不要依赖
offsetWidth/offsetHeight—— 提示框若含display: none或未渲染，值为 0
用 clamp() 和视口单位做 CSS 层面兜底
JS 修正之外，CSS 可提供安全边界和弹性收缩。关键不是“防溢出”，而是让提示框在空间不足时自动缩容或换向。
立即学习“前端免费学习笔记（深入）”；
- 最大宽度用
max-width: clamp(200px, 80vw, 320px)，避免在窄屏撑满全宽 - 内部文字用
overflow: hidden; text-overflow: ellipsis; white-space: nowrap防止单行文本撑破 - 箭头或小三角用
transform: translate(-50%, -50%)居中，而非绝对top/left固定值 - 慎用
min-width—— 它会阻止收缩，在小屏下反而加剧溢出
移动端 Safari 的定位偏移问题
iOS Safari 在地址栏收起/展开时会触发布局重算，但 resize 事件不触发，导致提示框错位。这不是 bug，是 Safari 视口行为特性。
- 监听
scroll事件代替resize（地址栏变化会引发页面滚动） - 延迟 100ms 再重新定位，避开 Safari 的瞬时布局抖动
- 避免用
vh单位做 top/bottom 计算 —— iOS 中100vh包含地址栏高度，实际可用视口更小 - 真机调试时务必关掉“请求桌面站点”，否则模拟行为与真实表现差异极大
真正麻烦的不是“怎么让它不超出”，而是“超出后用户还能不能操作到它”。很多方案只解决视觉裁剪，却让提示框的点击区域被截断或 z-index 被压住。位置修正、交互热区保留、键盘焦点管理，这三者缺一不可。
