position-fallback并非css标准属性，而是对锚点定位草案fallback关键字、ui库回退策略或@supports多重声明的误称；真正防溢出需js动态修正或chrome/edge 120+的inset-area+anchor-name组合。
position-fallback 是什么？它根本不存在
CSS 标准里没有 position-fallback 这个属性，也没被任何浏览器实现过。你在搜索或文档中看到它，大概率是混淆了几个概念：一是 CSS 锚点定位（anchor-positioning）草案中的 fallback 关键字用法；二是某些 UI 库（如 Popper.js）或框架封装的“回退策略”术语；三是把 @supports 条件 + 多重 position 声明误当作“fallback 机制”。真正在用的、能解决溢出问题的，是 JavaScript 驱动的动态位置修正，或者现代 CSS 的 inset-area + anchor-name 组合（目前仅 Chrome/Edge 120+ 支持）。
Chrome 的 anchor positioning 怎么防溢出？
真正可用的锚点定位靠的是 anchor-name 和 inset-area，但它本身不自动防溢出——溢出仍需 JS 干预。不过它提供了更可控的定位上下文，让 JS 计算更简单：
-
anchor-name: --trigger必须加在触发元素（如按钮）上，否则anchor-reference找不到目标 -
inset-area: top right表示优先放在触发器右上方，但若空间不足，它不会自动换向——这一步仍要 JS 检查getBoundingClientRect()后手动切到bottom left - 不能依赖
inset: anchor(--trigger top)直接计算像素值：它只在渲染后才解析，且不暴露数值，无法用于边界判断 - 必须配合
requestAnimationFrame在 layout 完成后读取尺寸，否则getBoundingClientRect()返回的width/height可能为 0
为什么 overflow: hidden 对 fixed/absolute 提示框无效？
因为 overflow: hidden 只裁剪**其格式化上下文内**的内容。而 position: fixed 元素的包含块是视口，position: absolute 的包含块是最近的 position: relative|absolute|fixed 祖先——如果那个祖先不是你设了 overflow: hidden 的容器，裁剪就完全不生效。
- 常见错误：给按钮父级 div 设
overflow: hidden，但提示框挂载在document.body下 → 不受任何影响 - 正确做法：要么把提示框 DOM 移进该父容器内部（结构变更），要么改用
position: absolute+ 父容器position: relative，再配overflow: hidden -
contain: layout paint可以减少重排干扰，但它不改变裁剪行为，只是让 JS 修正位置时更稳定
真正防溢出的最小可行 JS 逻辑
别指望纯 CSS 解决所有场景。以下是最简、最常被忽略的三步校验逻辑（必须用 requestAnimationFrame 包裹）：
- 先调
el.getBoundingClientRect()拿到提示框当前视口坐标 - 检查
rect.right > window.innerWidth：超右边界 → 改left为rect.left - el.offsetWidth - gap（gap 是留白） - 再检查
rect.bottom > window.innerHeight：超下边界 → 改top为rect.top - el.offsetHeight - gap - 注意：不要在
display: none状态下调用getBoundingClientRect()，它返回全 0；确保元素已插入 DOM 且 visibility 不为 hidden
复杂点在于，很多组件在内容异步加载（比如图片、远程文本）后尺寸才确定，这时候初始位置计算就是错的——必须监听 ResizeObserver 或内容 load 事件，再触发第二次修正。这点最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
