CSS의 position 속성은 요소의 위치를 지정하는 핵심 속성입니다. 웹 페이지에서 요소를 원하는 위치에 배치하려면 position 속성과 함께 top, right, bottom, left 같은 오프셋 속성을 조합하여 사용합니다.
position 속성의 주요 값
static – 기본값입니다. 요소가 일반 문서 흐름(normal flow)에 따라 배치되며, 앞선 요소와 뒤따르는 요소의 순서를 그대로 따릅니다. 오프셋 속성(top, left 등)이 적용되지 않습니다.
relative – 요소가 일반 문서 흐름에 따라 배치된 후, 지정한 거리만큼 상대적으로 이동(offset)합니다. 원래 차지하던 공간은 유지되므로 주변 요소의 배치에는 영향을 주지 않습니다.
absolute – 요소가 가장 가까운 조상 요소 중 position이 설정된 컨테이닝 블록(containing block)을 기준으로 배치되며, 일반 문서 흐름에서 완전히 제거됩니다.
fixed – position: absolute와 동일하게 동작하지만, 뷰포트(viewport)를 기준으로 고정됩니다. 페이지를 스크롤해도 화면상 같은 위치에 계속 머무릅니다.
sticky – 일반 흐름에 따라 배치되다가 스크롤이 지정한 임계점에 도달하면 fixed처럼 고정되는 하이브리드 방식입니다. 헤더나 내비게이션 바 구현에 자주 활용됩니다.
다음은 CSS로 요소를 포지셔닝하는 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
color: white;
text-align: center;
height: 100px;
width: 100px;
}
.static {
position: static;
background-color: greenyellow;
}
.relative {
position: relative;
left: 50px;
background-color: rgb(255, 47, 47);
}
.absolute {
position: absolute;
right: 50px;
top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제에서 static 요소는 문서 흐름대로 배치되고, relative 요소는 원래 위치에서 오른쪽으로 50px 이동하며, absolute 요소는 문서 흐름에서 벗어나 화면 우측 상단을 기준으로 배치되는 것을 확인할 수 있습니다.