儘管 z-Index 使用正確，如何修復 Div 出現亂序的問題？

使用 z-index 控制堆疊順序

在 HTML 中分層元素時，z-index 控制哪些元素出現在頂部。儘管正確使用 z-index，但仍可能會遇到一個 div 位於另一個 div 下方的情況。

要解決此問題，請考慮以下事項：

CSS 代碼：

<code class="css">div {
  width: 100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}</code>

說明：

1. 新增位置：相對於兩個div 以建立堆疊上下文。這使得 z-index 能夠正常工作。
2. 為應該出現在頂部 (div1) 的 div 設定更高的 z-index。
3. 確保底層 div 的 z-index ( div2) 較低。

透過執行這些步驟，div1 將按照所需的堆疊順序正確顯示在 div2 上方。

以上是儘管 z-Index 使用正確，如何修復 Div 出現亂序的問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！