今日、仕事でかなりガッツリとCSSを組んでたんですよ。
んで、表示する順番を指定出来るz-indexってのがあるんですけど、
それが全然効果がなくて、パニックを起こしたんですよね……(；・∀・)
んで、一応解決したので、その備忘録でも残しておこうかなと。
まず基本ですが、z-indexってのは、ボックス同士の重なりを制御するやつです。
z-index:5;
こんな感じで指定してあげます。数字がデカければでかいほど、上に表示されます。
z-indexの値が小さいやつの上にz-indexの値が大きいボックスが重なるって感じですかね。
んで、検証用にこんなソースを書きます。
まずはHTMLの方。
<body>
<div id="area01">エリアその1</div>
<div id="area02">エリアその2</div>
<div id="area03">エリアその3</div>
</body>
続きまして、以下はCSSです。
#area01{
width:200px;
height:200px;
font-weight:bold;
background-color:red;
}
#area02{
width:200px;
height:200px;
font-weight:bold;
background-color:green;
margin-top:-100px;
margin-left:100px;
}
#area03{
width:200px;
height:200px;
font-weight:bold;
background-color:yellow;
margin-top:-100px;
margin-left:200px;
}
んでブラウザで表示させてみるとこんな感じ。
原色使ってるんでチカチカしますよー。
ソースの上から順繰りに表示させるので、
最終的には黄色が一番先頭になるんですよ。
で、配置を逆にしたいとします。
素直に考えると、こう指定してあげればいいはず。
#area01{
width:200px;
height:200px;
font-weight:bold;
background-color:red;
z-index:3;
}
#area02{
width:200px;
height:200px;
font-weight:bold;
background-color:green;
margin-top:-100px;
margin-left:100px;
z-index:2;
}
#area03{
width:200px;
height:200px;
font-weight:bold;
background-color:yellow;
margin-top:-100px;
margin-left:200px;
z-index:1;
}
ですよね。
z-indexの値が大きい方が上に来るので、これで赤が一番先頭にくるはずッ!!(｀・ω・´)
と思ってやってみた結果がこちら。
えー(´・ω・｀) 効いてないですねー(´・ω・｀)
ここで私こと管理人さんはパニックを起こしましたよ(；・∀・)
『なんで効かないのッ!!ヽ(｀Д´#)ﾉ』てw
前はz-indexでガンガンに順序をいじってましたから、
今回z-indexが効かないというのでパニックを起こしてしまいして(；・∀・)
さて原因なのですが、
z-indexはposition:relativeかposition:absoluteを指定してあげないと効かないそうです(；・∀・)
そういや昔はよくpositionで位置指定してたもんなぁ……(；・∀・)
というわけで、こういうcssにしてあげるのが正解なのです。
#area01{
width:200px;
height:200px;
font-weight:bold;
background-color:red;
position:relative;
top:0px;
left:0px;
z-index:3;
}
#area02{
width:200px;
height:200px;
font-weight:bold;
background-color:green;
position:relative;
top:-100px;
left:100px;
z-index:2;
}
#area03{
width:200px;
height:200px;
font-weight:bold;
background-color:yellow;
position:relative;
top:-200px;
left:200px;
z-index:1;
}
んで、このソースの実行結果がこちら。
うむ。期待通りです。
なんつーか最近はmarginを駆使してボックスの配置をいじることが多かったので、
今回z-indexが効かなくてパニックを起こしちゃったんだなぁと自己分析です。
『z-indexが効かねぇえ!!!(｀；ω；´)』てことになったら、
positionのことを思い出してくださいまし。
