為什麼我的固定位置元素會出現在具有較高 z 索引的靜態位置元素前面？

已解決的z-index 問題：了解固定定位

儘管設定了z-index，但有時製作固定定位元素可能會很困難出現在靜態位置的後方。常見的解決方法是在靜態元素上使用絕對定位。

要深入研究此行為，請考慮以下範例：

<div>
<pre class="brush:php;toolbar:false">#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  z-index: 1;
}

您會注意到，固定元素（z-index 1）保留在靜態元素（z-index 10）前面。發生這種情況是因為預設情況下，靜態定位元素沒有堆疊上下文，這意味著它們不受 z-index 的影響。

要解決此問題，您可以透過新增相對於靜態元素的位置來定義靜態元素的堆疊上下文。這將建立一個新的 z-index 圖層，其中 z-index 屬性按預期運行。

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

現在，固定元素將如預期出現在靜態元素後面。這個簡單的調整可確保正確的 z-index 行為，使您能夠有效地控制元素的分層。