Z インデックスを使用して子要素を親の上に配置するにはどうすればよいですか?

Z-Index を使用して子要素を親の上に配置する方法

Web 開発では、多くの場合、要素の積み重ね順序を制御する必要があります。デフォルトでは、要素は HTML コードに表示される順序に従って配置されます。ただし、z-index プロパティを使用してこの動作をオーバーライドすることは可能です。

次の HTML コードを考えてみましょう:

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

この構造では、子要素が親要素内にネストされています。 。重なり順は、親要素が子要素の上に配置されるようになります。

次に、子要素が WholePage 要素の上に表示されるように重なり順を変更するとします。次の CSS に示すように、z-index を使用してこれを実現することができます:

.parent {
    z-index: 10;
}

.child {
    z-index: 20;
}

ただし、この変更では望ましい効果は得られません。子要素は、z インデックスが高くても、親要素の下に配置されます。

これは、エラーにあるように、「子の z インデックスが同じスタッキング インデックスに設定されているため」です。その親として。」これは、z-index だけを使用して子要素をその親の上に配置することは不可能であることを意味します。

望ましい積み重ね順序を実現するには、子要素と親要素の間の入れ子関係を削除する必要があります。これは、次のように子要素を親要素の兄弟にすることで実行できます。

<div class="parent"></div>
<div class="child">
    Hello world
</div>
<div class="wholePage"></div>

この変更により、子要素は必要に応じて、wholePage 要素の上に配置されます。

以上がZ インデックスを使用して子要素を親の上に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。