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

2021年07月31日

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

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

相対位置:relative

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

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

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。