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

z-index-top

ど~も、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でチェックしてもシッカリ動作しているっぽい。
z-index1

試しに画像を透明にしてみた結果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^)/スッキリ


コメント

Facebookコメント

※コメントしたけど表示されてない方へ

パーマリンクを変えてしまったおかげで表示されなくなってしまいました。
折角コメントいただいたのにスイマセンm(__)m
パーマリンク変更しても何とか表示できる方法を現在模索中です。

“Facebookコメント”じゃないコメントを残す

このコメント欄は一時的に且つ試験的に復活させ実装させています。スパムが増加すると廃止します。なのでできるだけFacebookのコメントでコメントをお願いします。m(__)m
なお、メールアドレスは公開されることはありません。

  1. ししまる さんのコメント

    いい記事をありがとうございました。こちらを見なかったら、延々とデスマーチが続いていたかも。
    私は自分のサイトを作る程度でSEOはあまり関係ないんですが、空タグはダメなんですね。

    • dice さんのコメント

      解決できてよかったですね!
      空タグダメは絶対ってわけではないです、致命的なペナルティ食らうわけではないですが(節操なく多用するとダメだと思うけど)HTMLの本質はデザインなど装飾目的ではなくあくまで「テキストに意味付けをする」だけなのでそれに背くことになります。まー大手サイトも、新進気鋭なウェブプロダクションもやってたりしますから、ほどほどなら。

コメントを残す