【HTML&CSS】position(ポジション)の使い方と注意点を解説

HTMLを学ぶ上で、CSSのposition(ポジション)プロパティを覚えておいて損はありません。

そこで本記事では、positionプロパティの使い方と注意点を、わかりやすく解説しています。間違って覚えている人も多い、「static」「relative」「absolute」「fixed」の違いについても、きちんと理解しましょう。

HTML&CSSにおけるposition(ポジション)とは

HTMLとCSSを勉強していると、position(ポジション)について学ぶ機会があると思います。positionとは、CSSのプロパティの1つで、要素の配置方法を設定するプロパティです。
気を付けたいのが、要素の配置を決めるのではなく、要素の配置方法を決めるプロパティだということです。

相対位置と絶対位置の違い

positionプロパティに設定できる値には、相対位置と絶対位置を指定できます。そこで、まず理解しておきたいのが、相対位置と絶対位置の違いについてです。それぞれの違いは、次の通りです。

  • 相対位置:特定の位置を基準にした位置
  • 絶対位置:指定した位置

ポイントは、他の要素の影響を受けるかどうかですね。相対位置は、使うのは難しいけど融通が利きやすく、絶対位置は、簡単に使えるけど融通が利かないイメージです。

CSSのposition(ポジション)プロパティの使い方

CSSのpositionプロパティの使い方について解説していきます。positionプロパティに指定できる値は、次の4つです。

  • static:通常位置(初期値)
  • relative:通常位置を基準に相対位置を指定
  • absolute:親要素を基準に絶対位置を指定
  • fixed:ウィンドウを基準に絶対位置を指定

それでは、各値について詳しくみていきましょう。

static

CSSのpositionプロパティに「static」を指定した場合、要素は通常の位置に配置されます。初期値でもあるので、特に設定する必要はありません。実際、ほとんど使われる機会のない値です。
参考として、positionプロパティに「static」を指定した場合のコードを紹介します。

See the Pen
MWePwKy
by sho-go (@sho-go)
on CodePen.

通常の配置での出力結果なので、特に変わった点はありません。上記の出力結果は、positionプロパティに他の値を設定したときの結果と、見比べるのに役立ててください。

relative

CSSのpositionプロパティに「relative」を指定した場合、要素は通常位置を基準に相対的に配置されます。
実際に、positionプロパティに「relative」を指定した場合のコードを紹介します。

See the Pen
JjKmdGr
by sho-go (@sho-go)
on CodePen.

positionプロパティは、要素の配置方法を決めるプロパティなので、配置位置は「top」「bottom」「left」「right」プロパティで、具体的な位置を指定します。
出力結果を見てみると、青色背景要素の通常位置を基準に、上と左に距離が空いているのがわかります。

absolute

CSSのpositionプロパティに「absolute」を指定した場合、要素は親要素を基準にした絶対位置で配置されます。
実際に、positionプロパティに「absolute」を指定した場合のコードを紹介します。

See the Pen
gOMBpPZ
by sho-go (@sho-go)
on CodePen.

positionプロパティの値を「relative」から「absolute」に変更しましたが、「top」と「left」の値は変更していません。しかし、出力結果を見てみると、「relative」のときとは表示が変わっています。
これは、親要素(画面の左上端)を基準にして、絶対位置で表示されたためです。

fixed

CSSのpositionプロパティに「fixed」を指定した場合、要素はウィンドウを基準に絶対位置で配置されます。
実際に、positionプロパティに「fixed」を指定した場合のコードを紹介します。

See the Pen
bGemdEP
by sho-go (@sho-go)
on CodePen.

要素が表示される位置は、positionプロパティの値が「absolute」の場合と一見同じです。しかし、「fixed」を指定して配置した要素は、スクロールをしても同じ位置に出力され続けます。
これは、ウィンドウを基準にして、絶対位置で表示されているためです。ページの目次や広告などの表示で、よく使われている機能ですね。

relativeとabsoluteはセットで使うことに注意

「absolute」は、自由度が高い一方で、レイアウトの崩れの原因になりがちです。これは、ページ全体を基準に配置位置を決めている場合に、起きやすいトラブルです。「absolute」を使うときには、親要素に「relative」を使うと良いでしょう。

実際に、positionプロパティに「absolute」を指定し、親要素に「relative」を指定した場合のコードを紹介します。

See the Pen
MWePwyy
by sho-go (@sho-go)
on CodePen.

出力結果を見てみると、親要素に「relative」を指定したので、青色部分の左上端を基準に絶対位置で配置されました。一方、親要素に「relative」を指定しなかった場合は、レイアウトが崩れてしまいます。

ページ全体を基準に「absolute」を使うと、レイアウト崩れの原因になりやすいです。レイアウト崩れを未然に防ぐためにも、「relative」と「absolute」はセットで使うように注意しましょう。

まとめ

いかがでしたか?CSSのposition(ポジション)プロパティの使い方を理解することは、HTMLを学ぶ上で必要だと感じていただけたでしょう。

まだHTMLを学び始めたばかりなのであれば、この機会にpositionプロパティの使い方はもちろん、今回紹介したpositionプロパティに指定できる値の違いや注意点を、しっかりと理解しておきましょう。今後、見やすいサイト作りに、きっと役立つと思いますよ。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?