為什麼 Z-Index 在固定定位上無法如預期運作？

z-index 不支援固定定位

在頁面佈局中，z-index 決定了網頁上元素的堆疊順序，較高的值出現在頂部。然而，當一個元素被固定定位時，似乎與直覺相反，很難使用 z-index 將其放置在靜態定位的元素後面。

範例

考慮以下HTML 和CSS 程式碼：

<div>

#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;
}

如範例所示，儘管更高z-index值分配給#over，固定定位元素#under保留在頂部。

解釋

令人困惑的行為源自於靜態和固定之間的固有差異定位。

• 靜態定位使元素不受 z-index 的影響，因為它們位於正常的流中文檔。
• 固定定位，另一方面，從正常流程中刪除元素並將它們相對於視窗（使用者的螢幕）定位。

在此上下文中，z-索引僅確定固定元素相對於其他固定元素的堆疊順序

解

要修正此問題，請新增相對於靜態定位元素的位置：。這會為 #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;
}

以上是為什麼 Z-Index 在固定定位上無法如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！