【Css】Z-indexについてNo-1（stacking context）

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

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

# z-indexとは
MDNの公式ドキュメントには以下のように解説されています。
>CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。

要するに同じ積み重ねコンテキスト(stacking context）内の要素同士の積み重ねレベルを指定し、表示される上下の位置関係を指定するプロパティです。ここで重要な概念がstacking contextです。

# 単純にz-index値を高くするだけでは、要素の積み重ね度は変わらない
要素は記述した順に下から上へと積み重なります。

```html
<body>

  <div class="red"></div>
  <div class="blue"></div>
  <div class="yellow"></div>

</body>
```

```css
.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: -50px;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-bottom: -50px;
}

.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
```
これを赤の上に青、その上に黄が積み重なっています。
![スクリーンショット 2021-05-20 6.49.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/bce3206b-8ca0-de46-fcca-8abba92dea51.png)
この状態で青を一番下にし、次に赤、黄が来るようにz-indexを指定してみます。

```css
.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: -50px;
  z-index: 2;                //追記
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-bottom: -50px;
  z-index: 1;  　　　　　　　　 //追記
}

.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
  z-index: 3;　　　　　　　　   //追記
}
```
結果は前と同じです。このようにz-indexを指定するだけでは要素の積み重ね順を変えることはできません。

![スクリーンショット 2021-05-20 6.49.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/0d297d80-a036-f562-f761-ca6f5dc08106.png)

# Contextとは
要素が積み重なるには土台（ベース）となるものが必要です。お家が建つには土台となる地面が無いとダメですよね。それと同じく要素は何かの土台の上に積み重ねられています。cssでは積み重ねの概念としてcontextというものがあります。<b>同じcontext（土台）の要素同士でしかz-indexは適用されないです。</b>
htmlは階層構造になっていて、要素には必ず親子関係があります。要素の積み重ね順は親要素がcontext(土台）であり、そのcontext上の同じ階層の兄弟要素（siblings)同士にしか適用されません。先程の例でいうとbody要素のcontext上にred,blue,yellowという3つの兄弟要素があるので、積み重ね順が決まるのです。

```html
<body>                           //bodyタグが親要素でありcontextを生成している
  <div class="red"></div>             //bodyが生成するcontext内にある
  <div class="blue"></div>
  <div class="yellow"></div>
</body>
```
仮に次のようにredの中にbuleがあり、blueの中にさらにyellowがあった場合はどうなるでしょうか。

```html
<body>
 <div class="red">
    <div class="blue">
      <div class="yellow"></div>
    </div>
  </div>
</body>
```
cssの記述は以下の通り。

```css
.red {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: -50px;
}

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-bottom: -50px;
}

.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
```
結果としては黄色だけになってしまいました。
![スクリーンショット 2021-05-20 7.15.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/020be014-4c13-f0fc-0320-6c677495344c.png)
この原因はbodyタグのcontext上にredがあり、redタグのcontext上にさらにblueが、またblueタグのcontext上にyellowがあるからです。土台がそれぞれbody,red,blueと違うので家（red,blue,yellow)もその3つの土台を基準にして建っています（stacking)。<b>つまり、要素の積み重ね順は親要素を基準にした同じcontext内で決まります。</b> 

# 参考サイト
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