要素の重なりについて教えて下さい！（マウスオーバーする前とマウスオーバーした場合の違い）

Question

お世話になります。

なぜimg要素にマウスオーバーする前とマウスオーバーした場合で要素の重なりに変化が起こるのでしょうか？？
マウスオーバーされたimg要素にスタックコンテキストが形成されるとなぜ.block__new要素より重なりが上になるのかがわかりません。説明して頂けると有りがたいです。

<div class="block">
    <span class="block__new">new</span>
    <img src="img/100x100.png" alt="">
</div>

.block {
    position: relative;
    width: 100px;
    height: 100px;
}
.block:hover img {
    opacity: 0.8;
}
.block__new {
    position: absolute;
    top: -5px;
    left: -5px;
    background: tomato;
}

Answer 1

貴方、しっかり調べましたか？
あと質問の文が短すぎて具体的に何を言っているのかが分からない。

https://wa3.i-3-i.info/diff321over.html

https://www.flatflag.nir87.com/hover-1691

Comments

[退会済みユーザー]

回答ありがとうございます。