Relative positioning
position: relativeは、要素の元のドキュメントフロー上の位置を基準として、top、right、bottom、leftプロパティで位置をオフセットする配置方法です。要素は元の位置のスペースを保持したまま視覚的にのみ移動します。position: absoluteの基準コンテナを作成する目的でも多用され、CSSレイアウトの基本的な構成要素です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.position.relative | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.badge {
position: relative;
top: -8px;
left: 4px;
}ライブデモ
実務での使いどころ
-
要素の微調整と基準コンテナの作成
要素のフロー位置を維持しながら視覚的な位置を微調整したり、子要素のabsolute配置の基準点を設定します。
注意点
- position: relativeで移動した要素は元のスペースを占有し続けるため、周囲の要素には影響しません。意図しない重なりに注意してください。
アクセシビリティ
- 視覚的な位置とDOMの順序が乖離する場合、キーボードナビゲーションの順序が直感的でなくなる可能性があります。