Physical properties
物理プロパティ（top、right、bottom、left）は、positionプロパティと組み合わせて要素の配置位置を制御する基本的なCSSプロパティです。relative、absolute、fixed、stickyの各配置モードで使用でき、コンテナや画面端からの距離を指定します。CSSの最も古くから存在するプロパティ群であり、レイアウト構築の基礎です。
概要
物理プロパティ（top、right、bottom、left）は、positionプロパティと組み合わせて要素の配置位置を制御する基本的なCSSプロパティです。relative、absolute、fixed、stickyの各配置モードで使用でき、コンテナや画面端からの距離を指定します。CSSの最も古くから存在するプロパティ群であり、レイアウト構築の基礎です。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.tooltip {
position: absolute;
top: 100%;
left: 50%;
}実務での使いどころ
-
絶対配置要素の位置指定
ツールチップやドロップダウンメニューなど、親要素に対する相対位置に要素を配置します。
注意点
- 多言語対応が必要な場合は、論理プロパティ（inset-inline-start等）の使用を検討してください。leftやrightは書字方向によって意味が変わりません。
アクセシビリティ
- position: absoluteで配置した要素のDOMの順序がフォーカス順序に影響するため、論理的なタブ順序を維持してください。