z-index が効かない！入れ子でも階層構造でもz-indexを効かしてデザインしたい！

ど～も、dice（@dice_dDtea）です。

CSSでボックスの重なりを制御する時は z-index というものを使えばいいとなっております。
なんか3DCGでよく聞く単語ですね。

しか～し、

z-index って効く時と効かない時ってあるよね？

今までなんとなく力技やら何やらで特に調べることなく乗り越え(避けw)てきましたが、
今回 z-index を確実に動かす方法について記します。

そして、
階層関係なく重なり順を支配できるようになった暁に
「aタグで囲んだ画像(img要素)にロールオーバーすると box-shadow で画像に影を落とす」なんてことをやって見たいと思います。

スポンサードリンク

あ…ありのまま今起こった事を話すと z-index が効かないんだ！

ここにこんなコードがある。


<div class="thumbnail">
  <a href="foo.html">
    <img src="thumbnail.png">
  </a>
</div>

単純に、divタグ内に aタグでリンク付きの画像を配置しているhtmlである。

これにCSSで、
画像にシャドウを落としてちょっとしたトイカメラ的な露光不足にし、
マウスがロールオーバーした時に変化も付けたい。

そこでこんなCSSを書いた。


.thumbnail {
  width: 250px; height: 250px;
  margin: 0; padding: 0;
}

.thumbnail img {
  width: 250px; height: 250px;
}

.thumbnail a {
  display: block;
  width: 250px; height: 250px;
  box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.2) inset;
}

.thumbnail a:hover {
  box-shadow: 0px 0px 100px 10px rgba(41,41,41,0.9) inset;
}

そしたらこうなった。

影がない・・・。どこ？？
box-shadow 発動していないの？
Firebugでチェックしてもシッカリ動作しているっぽい。

試しに画像を透明にしてみた結果wwwwwwwww

ちゃんと box-shadow は作動していた・・・。
ってか、画像の裏にいた！

それなら z-index だな！
何もしないと aタグは imgタグより下にいるんで、
aタグを「上」に持って行きたい
そこで、こうした！


.thumbnail img {
  z-index: 1;
  width: 250px; height: 250px;
}

.thumbnail a {
  z-index: 10;
  display: block;
  width: 250px; height: 250px;
  box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.2) inset;
}

さて確認すると・・・、

！？
あれ？？ z-index 動かないよ！

そうです。
長年 HTML と CSS のコーディングしてきましたが、
z-index って発動する時としないときってあるよね？
どーも信用できない z-index。

入れ子～階層構造だからダメなの？ z-indexさん？？

というか、入れ子にしたらダメなんでしょうか？
同一階層でなければ重なり順を指定できないんでしょうか？

とずっと思い込んできました。
なので今まではこんな感じで力技で乗り切ってきました。


<div class="thumbnail" style="background-image: url(thumbnail.png);">
  <a href="">
    &nbsp;
  </a>
</div>

こんな感じで動きます。

重なりは階層が関係しているんで、
画像は aタグ直下の 3番目の階層で imgタグによる指定せず、
一番上の階層 div.thumbnail に style属性で background-image で画像を指定。

こうなると 空のタグができてしまいます。
これってソース的に美しくないというか、
W3Cの勧告に背いてるし、
SEO的にも良くないペナルティを受ける可能性をはらみます。

z-index を確実に効くようにしたい！

やっぱりソース的に美しくない、SEO的によろしくなさ毛な空タグは使わずなんとかしたい！

入れ子状態でも関係なく、
z-index を効かせて重なり順がコントロールできればいいんだが・・・、

できます！

力技だとか、Hackだとか、
そんなチャチなもんじゃなく正道ですよ！
そんなチャチなもんじゃあ断じてねえ、
もっとシンプルで正道な方法です・・・

position: relative; で You も z-indexマスター！

最初の、


<div class="thumbnail">
  <a href="foo.html">
    <img src="thumbnail.png">
  </a>
</div>

HTMLで何とかする方法が分かりました。

やはり z-index を使います。
先程、z-indexは効く時と効かない時があるとぼやきましたが、
今まで使い方とか効かない理由を追求してきませんでした。

長年コーディングしてますが、
恥ずかしながらよーやく最近分かりました（－－；）

「position」プロパティで「static 以外」で定義すれば効くようになります！

position: relative だとか、position: absolute だとか・・・。

つまり position プロパティは何も指定しないとデフォルトは「static」。
だから z-index が発動しないわけです。
ただそれだけ！


.thumbnail {
  position: relative;
  width: 250px; height: 250px;
  margin: 0; padding: 0;
  z-index: 1;
}

.thumbnail img {
  position: relative;
  width: 250px; height: 250px;
  z-index: -1;
}

.thumbnail a {
  display: block;
  width: 250px; height: 250px;
  box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.2) inset;
}

.thumbnail a:hover {
  box-shadow: 0px 0px 100px 10px rgba(41,41,41,0.9) inset;
}

これで動きます。

z-index使いたいところに「position: relative;」入れるだけ！

ブロックレベルの要素で入れ子にしている時に、
z-index を使いたければ、
必ず position プロパティで “static 以外”の値を指定しましょう！

これで入れ子関係なく階層構造の上下関係もなく、
z-indexを発動させ、重なり順を自由にコントロールできます。

あー＼(^o^)／スッキリ