【CSS】要素を自由な位置に配置する方法

ブロックなどの要素を自由な位置に配置する方法です。
親要素の position に relative を指定し、自由な位置に配置したい要素に absolute を
指定するだけでできます。

position	ボックスの配置方法を指定するプロパティ。 static：　そのままの位置（デフォルト） relative：　相対位置（px指定しなければstaticと同位置） absolute：　絶対位置（基準位置は、親要素がstatic以外であれば親、それ以外はウィンドウ左上） fixed：　絶対位置＋画面上に位置固定 ※static以外は top, left, right, bottom にpxを指定して、基準位置からの移動ができます。

HTML

<div id="contents">
	<div class="block">
		自由に配置するブロック
	</div>
</div>

CSS

#contents {
	position: relative;
	width: 500px; /* 任意 */
	height: 200px; /* 任意 */
}
.block {
	position: absolute;
	top: 50px; /* #contents内の上から何pxか */
	left: 150px; /* #contents内の左から何pxか */
}

背景画像と合わせて要素を配置したいときなどに便利ですね。