無料 · デザインと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.