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プロパティに指定できる値の違いや注意点を、しっかりと理解しておきましょう。今後、見やすいサイト作りに、きっと役立つと思いますよ。
