Jyunzyです。
z-indexを使うときって、ネガティブマージンやposition:absoluteの時に、画像やテキストの重なり順を変更したい時だと思います。
それでz-indexに一番大きい値を指定したのに、前面に表示されない場合は、static以外のposition属性を指定して見て下さい。
それでも変わらない場合は、親要素が影響しているかも知れません。
<section class=”main”>
<div class=”content”></div>
</section>
<div class=”side”></div>
<div class=”content”></div>
</section>
<div class=”side”></div>
上記のソースに、
content (z-index: 100;)
side (z-index: 5;)
main (z-index: 1;)
のようなz-indexが指定されている場合、どれが最前面に表示されるか分かりますか？
答えは「.side」です。
一見すると.contentが最前面に行きそうですが、子要素の場合は親要素から解放されないため、上に表示されません。
解決策としては、.contentを親の外側に移動すればいいです。
<section class=”main”></section>
<div class=”content”></div>
<div class=”side”></div>
- static以外のposition属性を指定してみる。
- タグを親要素の外側に移動してみる。
z-indexが効かない！と思ったらこの2点を試してみて下さい。
