{z-index:値;}
☆説明
ボックスを重ね合わせた場合の表示順位を設定する。
「値」には数字を記述しましょう。重ね合わせる順番なので、(1,2,3,4…)と、記述します。番号が大きい方が前面に表示されます。
使用するケースとしては、の重ねる順序を指定し、絶対配置で位置を変更する際、サイトのパーツ(ロゴとかヘッダー画像など)が隠れてしまうこともあります。そのような場合に両方にz-indexを指定刷ることで、表示順位を変更します。
画像を重ねて表示することも出来ます。ちょっとおしゃれな感じに重ねるといいかもしれません。
また、CSS3で画像を斜めにしたりするとまたおしゃれですね。
ボックスA
ボックスB
ボックスC
.boxA{ position:relative; border:solid; width:500px; height:370px;; } .boxB{ position:absolute; border:solid; width:200px; height:200px; top:50px; left:50px; background-color:green; z-index:1; } .boxC{ position:absolute; border:solid; width:200px; height:200px; top:100px; left:100px; background-color:yellow; z-index:2; }
ボックスA
ボックスB
ボックスC