2015年10月11日

CSSで、z-indexが効かなくてパニックを起こした時の落ち着き方。


今日、仕事でかなりガッツリとCSSを組んでたんですよ。
んで、表示する順番を指定出来るz-indexってのがあるんですけど、
それが全然効果がなくて、パニックを起こしたんですよね……(;・∀・)

んで、一応解決したので、その備忘録でも残しておこうかなと。

まず基本ですが、z-indexってのは、ボックス同士の重なりを制御するやつです。

こんな感じで指定してあげます。数字がデカければでかいほど、上に表示されます。
z-indexの値が小さいやつの上にz-indexの値が大きいボックスが重なるって感じですかね。

んで、検証用にこんなソースを書きます。
まずはHTMLの方。

続きまして、以下はCSSです。

んでブラウザで表示させてみるとこんな感じ。
原色使ってるんでチカチカしますよー。01
ソースの上から順繰りに表示させるので、
最終的には黄色が一番先頭になるんですよ。

で、配置を逆にしたいとします。
素直に考えると、こう指定してあげればいいはず。

ですよね。
z-indexの値が大きい方が上に来るので、これで赤が一番先頭にくるはずッ!!(`・ω・´)
と思ってやってみた結果がこちら。
01
えー(´・ω・`) 効いてないですねー(´・ω・`)

ここで私こと管理人さんはパニックを起こしましたよ(;・∀・)
『なんで効かないのッ!!ヽ(`Д´#)ノ』てw
前はz-indexでガンガンに順序をいじってましたから、
今回z-indexが効かないというのでパニックを起こしてしまいして(;・∀・)

さて原因なのですが、
z-indexはposition:relativeかposition:absoluteを指定してあげないと効かないそうです(;・∀・)
そういや昔はよくpositionで位置指定してたもんなぁ……(;・∀・)

というわけで、こういうcssにしてあげるのが正解なのです。

んで、このソースの実行結果がこちら。
02
うむ。期待通りです。

なんつーか最近はmarginを駆使してボックスの配置をいじることが多かったので、
今回z-indexが効かなくてパニックを起こしちゃったんだなぁと自己分析です。

『z-indexが効かねぇえ!!!(`;ω;´)』てことになったら、
positionのことを思い出してくださいまし。

 

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)