儘管 Z 索引較高，如何使父元素顯示在其子元素之上？

在 Z 軸上定位嵌套元素

在網頁設計中，元素相互嵌套是很常見的。然而，當涉及 z 軸定位時，實現所需的效果可能很棘手。本問題探討了一個場景，即儘管具有較高的 z-index 值，父元素仍需要出現在其子元素上方。

出現此問題的原因是為子元素設定負 z-index 會導致其低於包含元素，導致不期望的放置。為了解決這個問題，答案建議從父元素中刪除 z 索引，並為子元素指派負 z 索引。這可以確保父元素在 z 軸上保持在頂部，而不會犧牲頁面容器的位置。

這是一個修改後的範例來示範解決方案：

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}

.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -10;
}

.wrapper {
  position: relative;
  background: green;
  height: 350px;
}

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  ...
</div>

使用此更新的CSS，父元素將保留在子元素之上，即使它缺少z -index 屬性。由於其負 z 索引，子級被放置在父級下方，確保了所需的重疊效果。

以上是儘管 Z 索引較高，如何使父元素顯示在其子元素之上？的詳細內容。更多資訊請關注PHP中文網其他相關文章！