Webレイアウトに使う「position」プロパティについて

はじめに

CSSのpositionプロパティは、Webページ上の要素の配置方法を指定するプロパティです。難しく感じたので、今日はpositionプロパティについてまとめてみました。

参考にしたYouTubeの解説

よくYouTubeで勉強する際に参考にしているたにぐちまことさんのYouTubeです。

説明がとても分かりやすくて勉強になります！

youtu.be

1. position: static（デフォルト値）

staticはデフォルトの値。top、right、bottom、left、z-indexなどのプロパティを指定しても何も起こらない。

2. position: relative

今の位置から相対的に移動させることができる。

3. position: absolute

最も近い位置指定の親要素を基準として配置される。親要素にposition:relative;を指定して使うことが多い。親要素が見つからない場合は、ビューポートを基準とする。

4. position: fixed

ビューポートを基準として固定配置される。スクロールしても位置は変わらない。ナビゲーションバーなどによく使われている。

5. position: sticky

スクロール位置に応じて、relative位置とfixed位置を切り替える。見出しの追従などに使われている。

まとめ

positionプロパティはすぐにはなかなか理解できないですよね。何回も使ってレイアウトを自由自在にできるようにマスターしていきたいです！同じように勉強している方の参考になれば嬉しいです。