zindexの重なり順は何ですか? zindexの重なり順を詳しく解説

z-index に触れたばかりの人は、z-index の使い方を知りません。実際、z-index はそれほど複雑ではなく、使い方もそれほど簡単ではありません。 zindexの重なり順は？以下は、zindex の積み重ね順序をまとめたものです。

1: zindex

zindex の積み重ね順序は非常に単純です。各ドキュメント要素は要素の前に置くことも、要素の後ろに置くこともできます。 z-index とposition が含まれていない場合、z-index ルールは非常に単純です。ただし、実際には、現在の属性に含まれる場合は子と同じになります。要素は配置されていない位置に表示されます。

例:

HTML代码：
<div>
    <span class="red">Red</span>
</div>
<div>
    <span class="green">Green</span>
</div>
<div>
    <span class="blue">Blue</span>
</div>

CSS コード:

.red,.green,.blue{position:absolute;}
.red{background:red;z-index：1;}
.green{background:green;}
.blue{background:blue;}

上記のコードには 3 つの div があり、各 div にはクラスが含まれており、各スパンは対応する色を持ちます。スパンをドキュメントの左上隅に配置すると、他の色が重なり合います。最初のスパンを 1 に設定し、他の 2 つを未設定のままにすると、次のような効果が現れます。

#2: スタック コンテキスト## 現在、要素内でスタックを形成できます。

1 は 3 つの方法があります。ドキュメントのルート要素です。

## 未満である必要があります。

HTML ビデオ チュートリアル

以上がzindexの重なり順は何ですか? zindexの重なり順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。