為什麼 z-index 不影響固定位置的元素？

固定位置的元素不受z-index 影響

在CSS 中，z-index 屬性控制元素在頁面，較高的值將元素移到最前面。然而，有時固定定位的元素似乎不受 z-index 變化的影響。

此行為是由固定元素的預設靜態定位引起的。當具有固定定位的元素放置在具有預設定位的另一個元素中時，它會在該元素內建立一個堆疊上下文。在此上下文中，固定元素位於任何其他元素之上，無論其 z-index 如何。

要解決此問題，您可以為父元素添加相對定位。這會在父級中建立一個新的堆疊上下文，從而使固定元素的 z-index 生效。

範例：

考慮以下HTML 和CSS：

<div>
<pre class="brush:php;toolbar:false">#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;
}

在這種情況下，#under 元素將保留在#over 元素的頂部，即使儘管後者俱有更高的z-index。要解決此問題，請在 #over 元素中添加相對定位：

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

現在，#under 元素的 z 索引將按預期工作，將其放置在 #over 元素後面。