背景オーバーレイに関する1つの質問

Question

<div>
    <div>
         <div></div>
    </div>
</div>

内側の背景が外側の背景を上書きするように思えますが、なぜこのように設計されているのですか？

Answer 1

背景がネストされます... 紙片を考えてみてください。積み重ねると、最初の最大のサイズが表示されます。最初のサイズをその後ろのサイズより小さくすると、後ろのスペースがスペースを占有します。 透明性はこれと同じ原理で機能します。

Answer 2

z-indexプロパティを使用すると、要素の重なり方をより細かく制御できます。ただし、絶対配置レイアウトを使用している場合は、最後のオプションとしてのみお勧めします。それ以外の場合は、ネイティブHTMLセマンティクスを使用して、要素の配置に関するベストプラクティスを調べます。