CSS 상대 위치 지정(relative)이란?
CSS에서 요소의 position 속성을 relative(상대)로 지정하면, 해당 요소는 일반적인 문서 흐름(normal flow)에 따라 평소와 같이 렌더링됩니다. 다만 position 값이 relative인 요소는 CSS 위치 지정 속성인 left, right, top, bottom을 사용해 원래 자신의 위치를 기준으로 이동시킬 수 있습니다.
여기서 중요한 점은, relative로 이동한 요소가 원래 차지하던 공간은 그대로 유지된다는 사실입니다. 따라서 주변 요소들은 해당 요소가 이동하기 전의 원래 위치를 기준으로 배치됩니다.
예제 1: 기본적인 상대 위치 지정
먼저 CSS 상대 위치 지정의 기본 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
}
div:first-child {
position: relative;
top: 20px;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>PostgreSQL</div>
<p>PostgreSQL은 강력한 오픈 소스 객체-관계형 데이터베이스 시스템입니다.
15년 이상 활발하게 개발되어 왔습니다.................</p>
<div></div>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
첫 번째 div 요소가 top: 20px 설정에 의해 원래 위치에서 아래쪽으로 20px 이동한 것을 확인할 수 있습니다. 하지만 문서 흐름상 해당 요소의 원래 자리는 그대로 비어 있게 됩니다.
예제 2: relative · absolute · fixed 비교
이번에는 상대 위치 지정을 절대 위치(absolute), 고정 위치(fixed)와 함께 비교하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px double #a43356;
margin: 5px;
padding: 5px;
}
#d1 {
position: relative;
height: 10em;
}
#d2 {
position: absolute;
width: 20%;
bottom: 10px; /* 부모 요소 d1 기준 */
}
#d3 {
position: fixed;
width: 30%;
top: 10em; /* 뷰포트 기준 */
}
</style>
</head>
<body>
<div id="d1">PhoneGap은 Adobe System에서 만든 소프트웨어 개발 프레임워크로, 모바일 애플리케이션 개발에 사용됩니다. PhoneGap으로 앱을 개발할 때 개발자는 모바일 프로그래밍 언어를 몰라도 되며, HTML, CSS, JScript 같은 웹 개발 언어만 알면 됩니다.<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>출력 결과
위 코드는 다음과 같은 결과를 출력합니다.
핵심 정리
- relative: 요소가 원래 있어야 할 위치를 기준으로 이동하며, 원래 공간은 그대로 유지됩니다.
- absolute: position 속성이 지정된 가장 가까운 조상 요소(예제에서는 #d1)를 기준으로 배치됩니다.
- fixed: 브라우저 뷰포트를 기준으로 배치되며, 페이지를 스크롤해도 화면에 고정됩니다.