z-index が固定位置の要素に影響を与えないのはなぜですか?

z-index の影響を受けない固定位置の要素

CSS では、z-index プロパティは、要素の重なり順を制御します。ページでは、値を大きくすると要素が最前面に移動します。ただし、固定配置された要素は Z インデックスの変更の影響を受けないように見えることがあります。

この動作は、固定要素のデフォルトの静的配置が原因で発生します。固定位置の要素がデフォルト位置の別の要素内に配置されると、その要素内にスタッキング コンテキストが作成されます。このコンテキスト内では、固定要素は、z インデックスに関係なく、他の要素の上に重ねられます。

この問題を解決するには、親要素に相対位置を追加します。これにより、親内に新しいスタッキング コンテキストが確立され、固定要素の 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 インデックスを持っているにもかかわらずです。これを修正するには、#over 要素に相対位置を追加します。

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

これで、#under 要素の z-index が期待どおりに機能し、#over 要素の後ろに配置されます。