overlay クラスの要素は z-index の値を指定していないのに、なぜ上に乗っているのでしょうか？

Stacking Context という概念によって重なり順が決まっているためです。

2021年8月2日

ユーザー

お世話になります。

<div class="overlay"></div> の要素は、position: fixed; によって全画面配置されています。
ただ、z-index の値を指定していないのに、なぜ上に乗っているのでしょうか？
「モーダルウィンドウを作ろう」では、HTML で後に書かれた要素の方が上に乗るとの
説明だったと思います。
ちなみに、次の様に <div class="overlay"></div> を一番先に書いても、やはり上に乗って
いました。

<HTMLコード>