【初学者向け】positionの絶対値と相対値の考え方。

cssのpositionって要素を自由な位置に配置できるので非常に便利ですよね。
改めて調べてみると絶対値やら相対値やらと非常に分かりずらい・・・なので自分なりに分かりやすく解説していきたいと思います。

## 準備
以下の画像を使います。
![bee.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/fc7cf6ce-cf74-5885-6bf7-2d8bc376901b.png)
![seal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/ea0345d5-8f76-50b4-773f-c8985676bcdd.png)

ベースのコードは以下になります。

```html:html
<div class="parent">
  <img src="./img/seal.png" class="seal">
  <img src="./img/bee.png" class="bee">
</div>
```

```css:css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
}
```

## positionを使ってみる
早速position使っていきますが、その前にpositionの概念を知っておきましょう。
positionとは、<font color="red">**要素を自由な位置に配置できるプロパティです。**</font>
プロパティの値には、`static`,`fixed`,`relative`,`absolute`があります。
今回は`relative`,`absolute`についての解説です。

まず簡単な`absolute`から解説していきます。
`absolute`は絶対値と言う意味で、`top`,`bottom`,`left`,`right`の位置指定のプロパティを組み合わせることで<font color="red">**要素の順番や位置を無視して絶対的に配置させることができます。**</font>これはなんとなく想像できるかと思います。

そして`relative`ですが、こちらは相対値と言う意味です。
相対値とは必ず比較対象がないと成立しません。ではCSSの場合、比較対象とは何かというと<font color="red">**今要素がいる位置です。**</font>なので`absolute`同様、位置指定のプロパティを組み合わせることが出来るのですが、<font color="red">**今いる位置からどのくらい動くか**</font>を直接指定することが出来ます。

ちなみにこの位置のことを<font color="red">**基準値**</font>などと言います。

## 実演
理論がわかったところで、実際に動かしてみます。

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/7b48b3c6-ec59-cb00-9788-cf96c299caf8.png)

今の状態はこうですね。ちなみにアザラシと蜂を作ったつもりですｗ
コードを追加します。蜂を動かします。

```css:css
.bee{
  position: relative;
  top: 100px;
  left: 200px;
}
```

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/c1a5670b-7549-6032-d757-f4e0c1ab902c.png)


どうでしょう？蜂が<font color="red">**元いた場所の、上から100px、左から200px動きました。**</font>このように`relative`は位置を指定することで元いた場所を基準に好きな場所へ移動させることができます。

ただしこう言った使い方はあまりしません。実は`relative`の基準点を上手くいかし<font color="red">**`absolute`と合わせて使うことが殆どです。**</font>

## `relative`と`absolute`と合わせて使う。
これが一番オーソドックスな使い方です。
概要としては、<font color="red">**親クラスに`relative`を指定して基準点を作り、**</font><font color="red">**`absolute`で基準点からの絶対値を指定します。**</font>

コードを変えていきましょう。
※先程の`.bee`のコードは一旦消して置き換えましょう。

```css:css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
  /* position:relative;でこのクラスが基準のポジションになる。 */
  position: relative;
}
.seal{
  position: absolute;
  top: 0;
  left: 0;
}
.bee{
  position: absolute;
  top: 0;
  left: 0;
}
```

![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/7a50f22e-20a3-415b-4f9c-725db18773f0.png)

まず基準点は色のかかった四角いブロック、つまり親要素です。そして子要素であるアザラシと蜂は`absolute`で`top0`,`left0`がかかっています。これは<font color="red">**左上に配置することを指定してます。**</font>

ちなみに画像が重なって見えるのは、`float`同様、要素の回り込みが発生しているからです。
`float`と違うのは、後から配置した要素は<font color="red">**基本的には上に重なります。**</font>

ではそれぞれの画像の位置を少し変えてみましょう。

```css:css
.seal{
  position: absolute;
  top: 50px;
  left: 100px;
}
.bee{
  position: absolute;
  bottom: 0;
  right: 0;
}
```

![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/2491c3b8-6655-369f-adae-d16562862cc2.png)

まずアザラシは、基準点の上から50px、左から100pxの位置に配置しました。
次に蜂は、したから0px、右からも0pxの位置つまり、右下に配置しています。

## 応用編
基礎的な使い方がわかったところで少し応用的な使い方をします。
それは`relative`を使わず、`absolute`単体で使います。ではコードを変更します。
※`relative`を消します。

```css:css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
}
```

どうでしょうか？親クラスの枠外へ外れてしまいました。
<font color="red">**親クラスの`relative`がないと自動的に `body`が基準点になります。**</font>なので画面の左上、右下を基準にして画像が配置されてしまいます。

![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/3b225fc6-d41f-47f1-ec69-f30a6b1f5b10.png)

## 要素の重なりを調整する。
先程「後から配置した要素は基本的には上に重なります」と解説しましたが、これを調整する方法をお教えします。

```css:css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
  position: relative;
}
.seal{
  position: absolute;
  top: 50%;
  left: 50%;
}
.bee{
  position: absolute;
  top: 50%;
  left: 50%;
}
```

cssはこちらを使います。

画像の`absolute`にはそれぞれ`top50%`,`left50%`を指定しています。
基準点、つまり親要素の上から<font color="red">**高さの50%**</font>、左から<font color="red">**幅の50%**</font>

![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/5dc7bc56-2e86-f874-7433-2a69aa390d8f.png)

画面をみると画像が重なってます。アザラシくんの目に蜂の針が刺さってます。(そりゃ困った顔をしている訳だ・・・)
なので蜂を後ろに追いやります。`z-index`と言うプロパティを使います。これは<font color="red">**重なり順を調整するCSS**</font>で初期値を0として、数字が大きければ大きいほど最前面に配置されます。

```css:css
.seal{
  position: absolute;
  top: 50%;
  left: 50%;
  /* 重なり順を１つ前に出す */
  z-index: 1;
}
```

![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/3be5feb2-e716-9c53-6c88-650ff43bf88d.png)

これで重なり順を調整できました。

## 最後に
今回は`position`について簡単にまとめてみました。
アニメーションと組み合わせたものをおまけとして載せたかったのですが時間の都合でここまでにします。手が空き次第追記します、ではお疲れ様でした。