ホーム(記事一覧)へ

CSS positionの相対位置、絶対位置を解説

「positionで相対位置とか絶対位置とか聞くけどなんなの?どういう意味?」

CSS positionの相対位置、絶対位置を解説します。

相対位置:relative

position:relativeは相対位置指定要素です。

「relative」の和訳は「相対」です。

自分自身の元いた位置を基準として位置指定します。

絶対位置:absolute、fixed

position:absoluteは絶対位置指定要素です。

「absolute」の和訳は「絶対」です。

static以外のpositionを指定された直近の親(先祖)要素の位置を基準として位置指定します。positionの指定がない場合body(html)、つまりブラウザの左上が基準となります。

position:fixedも絶対位置指定要素です。

「fixed」の和訳は「不動」です。

body(html)、つまりブラウザを基準として位置指定します。

スクロールしてもブラウザに固定される特徴があります。

そもそも相対位置、絶対位置とは

相対位置は比較がある位置

例えば「新宿駅南口を出て右に100m」のように比較基準がある場合です。

このとき目的地を探す前に「新宿駅南口」という基準を探さなくてはいけません。

position:relativeは自分の元いた場所を確認してそこから比較した位置の指定であるため相対位置指定といえます。

絶対位置は比較がない位置

例えば住所や緯度経度です。

住所はどこかと比較する必要がありません。

緯度経度は0地点という比較基準があるように思えますが、0地点を知らなくても緯度経度だけで一発で場所が出てきます。

fixedも緯度経度の考え方に近く、bodyを基準として位置を指定しています。

ややこしいのはabsoluteです。比較する基準を作れるためです。

比較する基準があるならそれは相対位置です。

absoluteが絶対位置と言われるのは、比較する基準を作らなければfixed同様bodyが基準になるからでしょう。

まとめ

  • 相対位置:relative
  • 絶対位置:absolute、fixed

  • 相対位置は比較がある位置
  • 絶対位置は比較がない位置

以上、CSS positionの相対位置、絶対位置を解説しました。

関連記事