Physical properties
bottom は CSS のプロパティで、位置指定要素の垂直位置の設定に関与します。このインセットプロパティは、位置指定されていない要素には効果がありません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| left は CSS のプロパティで、位置指定要素の水平位置の決定に関与します。このinset propertiesは、位置指定されていない要素には効果がありません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| right は CSS のプロパティで、位置指定要素の水平位置の決定に関与します。このinset propertiesは、位置指定されていない要素には効果がありません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| top は CSS のプロパティで、位置指定要素の垂直位置を設定します。このinset propertiesは、位置指定されていない要素には効果がありません。 | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS プロパティ | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.tooltip {
position: absolute;
top: 100%;
left: 50%;
}ライブデモ
実務での使いどころ
-
絶対配置要素の位置指定
ツールチップやドロップダウンメニューなど、親要素に対する相対位置に要素を配置します。
注意点
- 多言語対応が必要な場合は、論理プロパティ（inset-inline-start等）の使用を検討してください。leftやrightは書字方向によって意味が変わりません。
アクセシビリティ
- position: absoluteで配置した要素のDOMの順序がフォーカス順序に影響するため、論理的なタブ順序を維持してください。