[[position]]の指定が初期値(static)の場合、z-indexの指定は無効になる。
たとえば以下のHTMLについて
```html
<div>
<div style="width: 32px; height: 32px; background-color: red"></div>
<div
style="
width: 24px;
height: 24px;
background-color: rgb(0, 0, 255, 0.5);
position: absolute;
top: 0;
left: 0;
"
></div>
</div>
```
↓
<div>
<div style="width: 32px; height: 32px; background-color: red"></div>
<div
style="
width: 24px;
height: 24px;
background-color: rgb(0, 0, 255, 0.5);
position: absolute;
top: 0;
left: 0;
"
></div>
</div>
赤い四角に `z-index: 100` を指定して赤い四角を前面に出したいが、結果は変わらない。
```html
<div>
<div style="z-index: 100; width: 32px; height: 32px; background-color: red"></div>
<div
style="
width: 24px;
height: 24px;
background-color: rgb(0, 0, 255, 0.5);
position: absolute;
top: 0;
left: 0;
"
></div>
</div>
```
↓
<div>
<div style="z-index: 100; width: 32px; height: 32px; background-color: red"></div>
<div
style="
width: 24px;
height: 24px;
background-color: rgb(0, 0, 255, 0.5);
position: absolute;
top: 0;
left: 0;
"
></div>
</div>
[[position]]指定をすれば解決する。
```html
<div>
<div style="position: relative; z-index: 100; width: 32px; height: 32px; background-color: red"></div>
<div
style="
width: 24px;
height: 24px;
background-color: rgb(0, 0, 255, 0.5);
position: absolute;
top: 0;
left: 0;
"
></div>
</div>
```
<div>
<div style="position: relative; z-index: 100; width: 32px; height: 32px; background-color: red"></div>
<div
style="
width: 24px;
height: 24px;
background-color: rgb(0, 0, 255, 0.5);
position: absolute;
top: 0;
left: 0;
"
></div>
</div>