【CSS】z-indexプロパティ / positionプロパティ

  ■z-index

 * ボックスの重なりの順序を指定する
 * 0を基準として、値が大きいものほど上になる。

  注意

 [1] z-indexが効かない場合がある
http://d.hatena.ne.jp/masomi79/20131125/1385392242
より
~~~~~~~
1) 親要素がposition:static;もしくはpositionが設定されてない
2) ほかにz-indexが設定されている
3) overflow:hidden;が設定されている
~~~~~~~

 実際に経験したのは、
1) で「一方の要素には、postion:absoluteが設定されていたが、もう一方の要素には何も設定されていなかった」
若干はまってしまった。

【対策】
 * 何も設定されていない要素に対して、「postion:relative」を設定し、z-indexを設定したところ
   z-indexが効くようになった。

 [2] 重なりは、親のz-indexとも密接に関わっている。
     # 意図しない重なりがある場合は親要素を調査するといいかも。
     # 詳細な説明は以下のサイトが非常に参考になる。
https://app.codegrid.net/entry/z-index-1

 

  ■position

 * absolute : 絶対位置
 * relative : 相対位置(通常の位置を基準とした相対位置)
 * fixed : 絶対位置 + 固定(ウィンドウを基準とした絶対位置)
 * static : 通常配置(デフォルト)

 

  参考文献

  z-index

 * すごくためになった
https://app.codegrid.net/entry/z-index-1

 

  関連記事

  要素を重ねるには...

http://blogs.yahoo.co.jp/dk521123/34534679.html