為什麼 z-index 不能與固定定位元素一起使用？

z-index 不適用於固定定位：揭開原因

固定定位是創建保留在原位的元素的強大工具無論滾動如何，螢幕都會顯示。但是，它有時會幹擾 z-index 屬性，該屬性控制元素的堆疊順序。

為了說明這一點，請考慮以下程式碼片段：

#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  border: 1px solid;
  height: 10%;
  background: #fff;
  z-index: 1;
}

正如您所期望的， #over 元素應該出現在#under 元素上方，因為它具有更高的z -index。然而，在這種情況下，#under 仍然覆蓋 #over。為什麼會發生這種情況？

答案在於#over 的預設定位。預設情況下，元素具有靜態定位，這表示它們在文件流程中佔據其自然位置。另一方面，固定定位元素會從正常流中移除，並放置在相對於頁面視窗的特定座標。

在這種情況下，#under 的固定位置將其帶出正常流，因此，它的 z-index 與靜態定位的元素無關。為了讓#under出現在#over後面，我們需要將#over的定位設定為relative。這會將 #over 放置在文件流中，但允許它根據指定的 z-index 移動其位置。

這是固定的程式碼片段：

#over {
  width: 600px;
  z-index: 10;
  position: relative;
}

#under {
  position: fixed;
  top: 14px;
  width: 415px;
  left: 53px;
  border: 1px solid;
  height: 10%;
  background: #f0f;
  z-index: 1;
}

現在，#under元素按預期出現在 #over 下面。請記住，為了使 z-index 正常工作，元素必須絕對或相對定位。

以上是為什麼 z-index 不能與固定定位元素一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！