【Css】Z-indexについてNo-2

# 初めに
cssで要素の積み重ね順を決めるz-index。ただz-indexに値を指定するだけではうまくいかない場面があります。その原因と理由について学習した内容を書いてみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

# 前回の記事
https://qiita.com/redrabbit1104/items/328003a9e90d5183ef9d

# z-indexとposition
z-indexを適用させるにはpositionがstatic以外になる必要があります。

```html
<body>
  <div class="red"></div>
  <div class="blue"></div>
</body>
```
positionをabsoluteにし、redのz-indexを５、blueのz-indexを２にします。

```css
.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 50px;
  position: absolute;
  z-index: 5;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  margin-bottom: 50px;
  z-index: 2;
}
```
redのz-indexが５で、blueの２より高いため、redがblueの上に乗っかっています。
![スクリーンショット 2021-05-21 6.54.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/138a1aaf-04ac-a936-6d5f-396530302cfa.png)
positionをコメントアウトしてみます。

```css
.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 50px;
  /* position: absolute; */
  z-index: 1;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* position: absolute; */
  margin-bottom: 50px;
  z-index: 2;
}
```
![スクリーンショット 2021-05-21 6.56.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/9856b40e-f44b-3207-b807-e223fde662bf.png)
redの下にblueが配置され、redとblueは重ならない状態です。<b>positionを指定しないと要素はデフォルトのpositionであるstaticが適用され、それぞれの要素そのものが個別のcontextを生成するからです。</b>

# z-indexとcontext
複数の要素（タグ）が一つのcontextを生成するためには、要素同士がsiblings(兄弟関係）である必要があります。redとgreenは同じ階層にあり兄弟関係です。buleはredの子で、yellowはblueの子である以下のような階層構造を持つhtml文書があるとします。

```html
<body>
  <div class="red">
    <div class="blue">
      <div class="yellow">
　　　 </div>
    </div>
  </div>
  <div class="green">
  </div>
</body>
```
redを一番上にしたいので、z-indexを10にし、その下にgreenが重なるようにz-indexを4にします。その下にはさらにblueが来るようにz-indexを2に指定し、最後にyellowを１にして一番下にしたいと思います。
図で表すと以下のようなものになります。（予想図）
![スクリーンショット 2021-05-21 7.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/b47a83bb-6c07-d578-a53c-10cc20aaf31d.png)

実際にそれに合わせてcssを記述します。

```css
.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 40px;
  position: relative;
  z-index: 10;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 30px;
  margin-bottom: 50px;
  z-index: 2;
}

.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin-left: 50px;
  position: absolute;
  z-index: 1;
}

.green {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  top: -30px;
  z-index: 4;
}
```
結果は以下の通りです。
![スクリーンショット 2021-05-21 7.51.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/a66b7eec-0076-7837-4cc5-0acb86886875.png)
予想とは違いredの下にgreenが来ているものの、一番下に位置するであろうyellowはblueの上になっています。さらにredはz-indexが10であるにも関わらず、z-indexが２のblueよりも下です。何故こうなるのでしょうか。

# contextは同じ階層（兄弟関係）でしか生成されない
contextは同じ階層でないと生成されません。上の例ではredとgreenが同じ階層で、blueとyellowはそれぞれ親子関係の別階層です。redとgreenが一つのcontextを生成し、blue、yellowはそれぞれの個別のcontextを生成します。合計3つのcontextが存在します。redとgreenが生成するcontext上でz-indexによる要素の上下関係が決まり、blueのcontextとyellowのcontextは順番通りにredとgreenが生成するcontextの上に積み重なるため、blueの上にyellowが乗っている形になります。

![スクリーンショット 2021-05-21 8.13.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/6f4a6fbd-9652-4837-44dc-bac50c323805.png)

# 参考サイト
https://developer.mozilla.org/ja/docs/Web/CSS/z-index
https://coliss.com/articles/build-websites/operation/css/4-reasons-z-index-isnt-working.html
https://jajaaan.co.jp/web-production/frontend/z-index/
https://qiita.com/hoto17296/items/42e62989193504d512c7