如何在 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-index 設定為高於其父級的z-index。但是，有兩種解決方法：

1。從父項中刪除z-index：

從「父」div 中刪除z-index 屬性：

.parent {
  position: relative;
}

這允許「子」div 繼承其自己的z -index，可以設定為高於“wholePage”。

2.使同級而不是子級：

不要成為「父親」div 的子級，而是讓「子」div 成為「wholePage」的同級並相應地設定其z 索引：

<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 確保它出現在上面。請注意，使用“位置：絕對；”而不是“位置：相對；”在這種情況下，允許子級位於其父級流程之外。

以上是如何在 CSS 中使用 z-index 將子元素放置在其父元素之上？的詳細內容。更多資訊請關注PHP中文網其他相關文章！