CSSにおける固定位置指定

ここでは、固定位置指定について詳しく見ていきましょう。これは絶対位置指定に似ていますが、違いはスクロールバーがある場合のこれらの位置指定タイプの挙動に現れます。

ページをスクロールすると、絶対位置指定された要素はページと一緒にスクロールします。以下の例をご覧ください：

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}

ページをスクロールしたときに位置指定された要素がその場に留まるようにすることもできます。そのためには、プロパティ position の値を fixed に設定して固定位置指定を設定します：

<div id="elem"></div>
<div id="content">
	some long text
</div>

#elem {
	position: fixed; /* 固定位置指定を設定 */
	top: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

#content {
	margin: 0 auto;
	width: 300px;
	text-align: justify;
	font: 16px Arial;
}