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