まず基本ですが、z-indexってのは、ボックス同士の重なりを制御するやつです。
| 1 | z-index:5; |
こんな感じで指定してあげます。数字がデカければでかいほど、上に表示されます。
z-indexの値が小さいやつの上にz-indexの値が大きいボックスが重なるって感じですかね。
んで、検証用にこんなソースを書きます。
まずはHTMLの方。
| 1 2 3 4 5 | <body> <div id="area01">エリアその1</div> <div id="area02">エリアその2</div> <div id="area03">エリアその3</div> </body> |
続きまして、以下はCSSです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #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; } |
んでブラウザで表示させてみるとこんな感じ。
原色使ってるんでチカチカしますよー。
ソースの上から順繰りに表示させるので、
最終的には黄色が一番先頭になるんですよ。
で、配置を逆にしたいとします。
素直に考えると、こう指定してあげればいいはず。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | #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にしてあげるのが正解なのです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | #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; } |
んで、このソースの実行結果がこちら。
うむ。期待通りです。
『z-indexが効かねぇえ!』てことになったら、
positionのことを思い出してください。
0 件のコメント:
コメントを投稿