CSSの z-index プロパティと要素の重なりについて

  • CSS
  • 現在地

今回は、要素が重なった場合の挙動と、これに関係するCSSの z-index プロパティについて記述しておきます。

HTML上の要素が重なった場合

要素同士が重なった場合、z-index の指定がない限りHTML上で、後に記述された要素が前面に重なって表示されます。

z-index の値が同じ場合も同様です。

z-index / 要素の重なり順の指定

z-index プロパティは要素同士の重なり順を指定するプロパティで、値には下の記述のように重なる順番となる数値(整数)が入ります。(初期値 : auto )

z-index: 1;

なお、この z-index プロパティによる重なり順を有効とするには、指定された要素の position に static 以外の値が設定されていることが必要です。

また、z-index が設定された要素は以下のような特性があります。

  1. z-index の値をマイナスに設定すると、親要素の下に隠れて表示されない。

    ただし、親要素の z-index が 0 以上に設定されていれば、親要素の影響により表示される。

  2. z-index が設定されていない要素は 1 以上の値が設定されている要素と重なると隠れてしまうが、その要素内の子要素の z-index の値が重なった要素より大きければ、その子要素のみ前面に表示される。

    あくまで、親要素の z-index が初期値である auto の状態でないと、この現象は起きません。

つまりこのプロパティの値は、重なり順が設定された上位の要素がある場合、その要素内での順番として設定されるようです。

ということで少しわかりにくいので、一つサンプルを用意してみます。

サンプル

このコンテンツ部分は z-index を設定しておらず、左のサイドバーとフッターには z-index が 1 として設定してあります。

で、この状態で下の「z-index の値を変更」ボタンをクリックしてみて下さい。

このサンプルではボタンをクリックすると、左側にあるサイドバーの z-index の値を 2,-1 に変更します。(3度目のクリックで元に戻ります。)

値が -1 なら親要素の背面に隠れ、2 なら box-shadow による影がフッターの上にかかります。(通常はフッターの影がサイドバーにかかるようになっています。)

ちなみに z-index の値が 2 になってもフッター部分の上に重ならないのは、そもそも重なっていないからです。(box-shadow の影より前面に来ているので、重なれば上に表示されます。)

スポンサードリンク

inserted by FC2 system