如何解 z-index 的 Div 重疊問題？

使用z-index 解Div 重疊

在某些情況下，即使使用z-index 屬性也可能會遇到div 重疊的問題。為了確保所需的分層效果，了解 z-index 的正確用法並考慮使用其他 CSS 屬性來建立堆疊上下文非常重要。

在給定的範例中，預期行為是讓 div1 出現在上方分區2。然而，僅為 div1 分配更高的 z-index 值可能並不總是能產生預期的結果。為了解決這個問題，您應該為兩個 div 添加position:relative 屬性。這會在元素內建立一個堆疊上下文，允許 z-index 正確生效。

下面修改後的程式碼包含此修復：

<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>

透過新增相對於兩個 div 的位置：我們為這些元素建立一個專用的堆疊上下文。這可確保分配給 div1 的較高 z-index 值得到尊重，從而使 div1 按預期顯示在 div2 上方。

以上是如何解 z-index 的 Div 重疊問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！