免费 · 设计与 CSS
CSS 锚点定位练习场.
用纯 CSS 锚点定位把提示框、菜单和弹出层放在按钮旁：选择方向、间距和备用位置，并实时预览。
Loading the calculator…
使用方法: CSS 锚点定位练习场
输入数据或选择文件，调整设置并生成结果。复制或下载之前，请检查结果。
限制与支持格式
输入内容在您的设备上处理。
英语技术说明
Needs a browser with anchor positioning (all major browsers since 2026). Everything is calculated in your browser; nothing you type is uploaded.
anchor-name marks the button, position-anchor ties the tooltip to it, position-area chooses the side and position-try-fallbacks switches sides when the tooltip would overflow.
position-area: top with a flip-block fallback keeps a tooltip above its button and moves it below when there is no room.