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;
}