CSS position-try 与弹出层避障定位实践

CSS position-try 与弹出层避障定位实践概述`position-try` 允许为元素声明一组备选定位策略，浏览器会根据可用空间选择第一个可行位置，实现原生的“避障与回退”。与 Anchor Positioning 协作可构建更稳定的弹层与提示定位。核心概念与参数`position-try`：提供多组定位候选，如 `top`、`bottom`、`left`、`right` 等组合。边界判定：浏览器依据可见性与溢出情况选择可行位置。与锚点协作：结合 `anchor-name`/`position-anchor` 精确对齐触发器。实践示例<style> .btn { anchor-name: --menu; } .menu { position-anchor: --menu; position: absolute; top: anchor(bottom); left: anchor(center); translate: -50% 8px; position-try: flip-block, flip-inline, none; border: 1px solid #ddd; border-radius: 8px; padding: 12px; background: #fff; } </style> <button class="btn">更多</button> <div class="menu" role="menu"> <button role="menuitem">编辑</button> <button role="menuitem">删除</button> </div> 验证方法浏览器支持：Chrome 120+（实验性）、Safari 技术预览；注意版本差异与语法变更。边界测试：靠近视窗/容器边缘拖拽触发器，观察位置回退是否正确。可访问性：与 `popover`/`dialog` 兼容使用，验证键盘导航与焦点返回。注意事项为不支持的环境提供保守定位与滚动避障回退（如 JS 计算）。候选顺序应从最理想到可接受，避免过多组合导致样式复杂度上升。与滚动容器协作时注意定位参照与可见性计算差异。