CSS에서 요소의 절대 위치

이번 강의에서는 요소의 절대 위치에 대해 살펴보겠습니다. 이를 통해 페이지의 지정된 좌표에 요소를 배치할 수 있습니다. 예를 들어, 페이지 상단에서 100px, 왼쪽에서 200px 위치에 요소를 배치할 수 있습니다. 요소는 그 위치로 이동하며, 다른 요소가 그 자리에 있더라도 상관없이 그 위에 겹쳐져 표시됩니다. 이렇게 하면 요소가 문서의 일반 흐름에서 벗어난다고 말합니다: 다른 모든 요소는 마치 우리의 요소가 없는 것처럼 행동합니다.

요소를 절대 위치로 만들려면 해당 요소에 position 속성을 absolute 값으로 설정해야 합니다. 이 속성 외에도 두 가지가 더 필요합니다: 하나는 수직 좌표를, 다른 하나는 수평 좌표를 지정합니다.

수직의 경우 위쪽 또는 아래쪽 여백을 설정해야 합니다. 위쪽 여백은 top 속성으로, 아래쪽 여백은 bottom 속성으로 설정합니다. 수평의 경우 왼쪽 또는 오른쪽 여백을 설정해야 합니다. 왼쪽 여백은 left 속성으로, 오른쪽 여백은 right 속성으로 설정합니다.

예제를 통해 살펴보겠습니다.

예제

먼저 위치 지정 없이 두 개의 블록을 만들어 보겠습니다 (body에 기본 margin이 있기 때문에 요소들이 창 가장자리에 붙지 않는다는 점에 유의하세요):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

예제

이제 초록색 블록에 절대 위치를 지정하고, 상단에서 150px, 왼쪽에서 100px 위치에 배치해 보겠습니다:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

예제

이제 초록색 블록을 상단에서 0px, 왼쪽에서 0px 위치에 배치해 보겠습니다:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

예제

이제 초록색 블록을 상단에서 0px, 오른쪽에서 0px 위치에 배치해 보겠습니다:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

예제

이제 초록색 블록을 하단에서 0px, 오른쪽에서 0px 위치에 배치해 보겠습니다:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

예제

이제 초록색 블록을 하단에서 0px, 왼쪽에서 0px 위치에 배치해 보겠습니다:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

실습 문제

절대 위치를 사용하여 블록들을 다음과 같이 배치하세요: