訓練校で学んだこと（css/position:relativeとabsolute）

独学でやっていたとき、positionが分からなさすぎて望んだ位置にいかないとか、absoluteとrelativeの違いがよくわからん！！！って感じで投げてしまっていたのですが、昨日訓練校で丁寧にpositionについて教えていただけて理解が深まった（ような気がする）ので。記事にしてまとめがならアウトプットしていきたいと思います。

ちなみに、理解が深まるまではtableタグの次くらいにpositionが嫌いでした( ;∀;)

そんなわけで、まず用意しましたのはこちらのよくあるbox3つとそれを囲うcontainerクラス。

HTMLはこちら↓

<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
</div>

cssはこちら↓

.container {
  background-color: #F3C759;
  width: 900px;
  height: 800px;
  text-align: center;
  margin: 0 auto;
}

.box1,.box2,.box3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}


.box1 {
  background-color: #007ab7;
}

.box2 {
  background-color: #b75c9d;
}

.box3 {
  background-color: #3db680;
}

positionには、relativeとabosoluteという値がありますが（ほかにもありますがそれは後日）、この二つはそれぞれ単体でも指定ができるのですが、セットで指定ができます。

まず今回はboxの親要素であるcontainerに対してposition: relative;を指定して、box1にposition: absolute;を指定します。
そして上から（top）の距離と左（left）からの距離も指定します。

.container {
  background-color: #F3C759;
  width: 900px;
  height: 800px;
  text-align: center;
  margin: 0 auto;
  position: relative;　←親要素にrelative（動きの起点となる指定）　
}

.box1 {
  background-color: #007ab7;
  position: absolute;　←子要素のbox1にabsolute（自由に動くぞ！宣言をさせる指定）
  top: 0;　←relativeを起点としたときの上からの距離を指定
  left: 150px;　←relativeを起点としたときの左からの距離を指定
}

.box2 {
  background-color: #b75c9d;
}

.box3 {
  background-color: #3db680;
}


.box1,.box2,.box3 {
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin-bottom: 20px;
}

（わかりやすいように記述の順番を少し変更しました）

ブラウザで確認するとこんな感じに。

コードの個所にも記載してしまいましたが、簡単に言うとrelativeは起点となる位置で、absoluteは「自由に動くぞ！」宣言です。relativeを指定した要素の左上が起点となっており、そこから「どの位置に、どのくらい移動するか」をabsoluteに指定することができます。

注意として、absoluteは「自分の元々いた場所の領域を残さずに（残さないで）移動」してしまうため、absoluteを指定しただけだと他の要素がある場合、下に重なってしまうので注意が必要です。

topとleftを指定せずbox1にabsoluteだけを指定した場合、他の要素が重なってきてしまう。

簡単に、relativeとabsoluteの関係が分かったところで、次はそれぞれを単体で指定した場合です。

absoluteを指定した場合は、先述したように「自分の元々いた領域を残さずに（消して）」移動してしまいます。
その時relativeをどこにも指定していなかったら、起点となる位置はbodyとなります。

bodyがrelativeとなって、bodyを起点にabsoluteは動きます。

.container {
  background-color: #F3C759;
  width: 900px;
  height: 800px;
  text-align: center;
  margin: 0 auto;
}

.box1 {
  background-color: #007ab7;
  position: absolute;
  top: 0;
  left: 150px;
}

containerのrelativeを削除し、box1にabsoluteと位置を指定すると、上記画像のような配置になります。
要素の近く、或いは要素の中で位置を動かしたい場合は、その要素にrelativeを指定してあげるといいかもしれません。

次にrelativeを単体で指定した場合です。
absoluteと同じく、relativeも単体で使用することができます。
absoluteとの違いは、relativeは「自分の領域を残して（消さずに）移動する」ことです。
今回はbox1にrelativeと距離を指定してみます。

.box1 {
  background-color: #007ab7;
  position: relative;
  top: 0;
  left: 150px;
}

先ほどabsoluteを指定したときは要素が重なってしまいましたが、relativeの場合、自身が元々いた領域を残して移動することが可能です。そのため、レイアウト崩れが起きづらいというメリットがあります。

また、マイナスの指定もできるため、absolute、relativeをうまく使うことができると、よくコーポレートサイトなどで見る、

精進します。

このようなデザインなどもできるようになります。

まとめると、
✓absoluteを指定するときはrelativeとセットで使った方がいいかも。
✓単体で使うときは、relativeを指定した方がレイアウト崩れを防げる。

要素の重なりを調整するz-indexや、positionの他の値にstickyやstatic、fixedなどもあるのですが、その辺はまだ自分のなかで理解が浅いため、また後日！

以上、positionのお話でした。