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

CSS デザイン

css_position

ブロックなどの要素を自由な位置に配置する方法です。
親要素の 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か */
}

css_position_sample

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

CSS デザイン

関連記事