Smart Brain

【これでもうデザインが崩れない】positionプロパティの仕組み

自分でpositionプロパティを使用してみると、何故かデザインが崩れてしまった！という体験をした方は多いのではないでしょうか？
positionプロパティは、要素の配置方法を指定するプロパティです。
好きな場所に要素を配置できたり、要素を固定したりと便利なプロパティですが、仕組みを知っておかないと上手く扱うことができません。
positionプロパティの値の指定方法は幾つかありますが、今回は「absolute」と、「relative」の仕組みについて解説します！

ここで聞きなれない言葉「通常フローで配置」、「絶対配置」が出てきました。

「通常フローで配置」というのは、htmlに記述した順番通りに縦積みで要素が配置されている状態です。

では、「絶対配置」とは何でしょうか？
絶対配置とは、他の要素に関わらず、指定した箇所に配置できる状態の事を指します。
実際に、top、right、bottom、leftの値を指定することで、好きな場所に要素設定することができるのは、絶対配置となっているためなのです。

ですが、絶対配置にする、ということは「デザインが崩れる原因」となる可能性があります。
その注意点を画像にまとめましたので、確認してみてくださいね。
positionプロパティは便利なプロパティなので、仕組みを理解して扱えるようになりましょう！