CSSでz-indexを使用して子要素を親の上に配置するにはどうすればよいですか?

z-Index を使用して子要素を親の上に上げる

HTML では、要素はドキュメント オブジェクト モデル (DOM) と呼ばれる階層構造に従います。複数の重なり合う要素が存在する場合、それらの z-index プロパティによって、どれが一番上に表示されるかが決まります。

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

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

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

「子」div を表示するとします。 「wholePage」div の上。ただし、デフォルトでは、「親」div の z-index はそのすべての子要素に影響します。

// Wrong approach
.parent {
  z-index: 100;
  position: relative;
}

// Incorrect output: "child" is hidden behind "wholePage"

解決策:

提供された回答で述べたように、それはCSS のみを使用して、子の Z インデックスを親の Z インデックスよりも高く設定することは不可能です。ただし、次の 2 つの回避策があります。

1.親から z-index を削除します:

「親」 div から z-index プロパティを削除します:

.parent {
  position: relative;
}

これにより、「子」 div が独自の z を継承できるようになります。 -index、「wholePage」よりも高い値に設定できます。

2.子の代わりに兄弟を作成する:

「親」 div の子にする代わりに、「子」 div を「wholePage」の兄弟にし、それに応じて z-index を設定します。

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

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

.sibling {
  position: absolute;
  z-index: 100;
}

.child {
  position: absolute;
  z-index: 150;
}

この場合、「child」と「wholePage」は両方とも兄弟であり、「child」の div はz-index を高くすると、確実に上に表示されます。 「position:Absolute;」を使用することに注意してください。 「位置: 相対;」の代わりにこのコンテキストでは、子を親のフローの外側に配置できます。

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