如何在 CSS 中使用 Z-Index 正確分層父元素和子元素？

在 Z-Index 中分隔父元素和子元素

在 CSS 中，z-index 屬性控制網頁上元素的分層。然而，有時，由於 CSS 處理堆疊上下文的方式，儘管具有較高的 z-index，父元素仍可能出現在其子元素後面。

要解決此問題，並不總是需要使用負 z-index在子元素上。相反，請考慮以下解決方案：

刪除父級的Z-Index 並更改子級的Z-Index：

不要在父級上設定z- index，而是將其刪除並為子項目設定負z 索引。這可確保子元素保持在父元素下方，而不會將其推出頁面容器。

這是修改後的CSS 程式碼：

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}
.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -1;
}

確保相對定位：

父元素和子元素都應將其位置屬性設定為相對或絕對，以啟用正確的分層。

範例HTML：

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  <div class="parent2">parent 2 parent 2</div>
</div>

此解決方案將父元素置於其子元素之上，而不會破壞頁面的整體佈局或導致意外行為。

以上是如何在 CSS 中使用 Z-Index 正確分層父元素和子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！