z-index:-1をすると消える、上に重なるときの対処法

「z-indexが効くとき、効かないとき」という記事でz-indexの挙動について解説しましたが、書き忘れていたので別の記事として書き出します。

ブロックに擬似要素を作って、z-index:-1で元の要素の下に入れようとして出来ない場合があるかと思います。

状況としては、元の要素の上に重なるか、-1に指定した要素が消えてしまうのではないでしょうか。

理想

今回はこれの原因と解決策です。

z-indexのおさらい

重要になるのは以下２点です。

今回ちゃんとした解説は端折るので、詳しく知りたい方は「z-indexが効くとき、効かないとき」をお読みください。

z-index:マイナスがきかない理由

疑似要素は子要素扱いなので、疑似要素にz-index:マイナスを指定したければ元の要素にz-indexの指定をしてはいけません。

z-index:マイナスの疑似要素が上に重なってしまう場合は、元の要素に指定しているz-indexの値をautoにする、またはz-indexプロパティそのものを指定しない必要があります。

そしてz-indexの指定がない場合、その要素の階層は親要素と同じになります。

すると疑似元の要素は下手をすれば< body >あるいは < html >と同じ階層にいることになります。

ということは、z-index:マイナスを指定した要素はhtmlの裏側に回り込んでいることになります。

ここまでが表示されない原因です。
「htmlの裏側」ってなかなかの響きですね。

z-index:-1を表示させる解決策

元の要素部分のhtmlはこうなっていると思いますが、

<div id="hoge"></div>
<!-- divに:before  :afterで擬似要素を作っている -->

それを違うブロックで囲んで、

<div class="another">
 <div id="hoge"></div>
</div>

囲んだブロック(.another)にposition:relativeとz-index:0以上を指定してやれば、#hogeの疑似要素は.anotherの下に回り込むことになるので、ちゃんと表示されます。

くどいですが、#hoge自体にはz-indexを指定してはいけません。

以上解決策でした。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]