z-index

z-indexについて

{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