display 속성으로 레이아웃을 구성하는 방법을 익힌 뒤는 요소를 세밀하게 배치하고 조정할 수 있는 position 속성을 제대로 이해해야 합니다. 이 글에서는 position 속성의 기본 개념부터 static, relative, absolute, fixed, sticky 각각의 차이와 특징을 살펴보겠습니다.
📌 display가 아직 헷갈린다면 position을 배우기 전에 이 글부터 보고 오는 걸 추천할게요! 😊
[🎨CSS] CSS display 속성 총정리
CSS는 기본 개념을 제대로 정리하지 않으면 나중에 flex나 grid 같은 레이아웃을 다룰 때 계속 헷갈리게 됩니다. 다르게 말하면 한 번만 제대로 정리하면 그 이후로는 어떤 레이아웃도 훨씬 쉽게 이
sim-plism.tistory.com
1️⃣ position이란 무엇인가?
`position` 속성은 HTML 요소가 페이지 안에서 어디에 어떻게 위치할지를 결정하는 CSS 속성입니다. 즉, positon을 설정함으로써 요소를 원하는 위치에 세밀하게 배치하거나 다른 기준을 잡아줄 수 있습니다. 기본적으로 모든 요소는 `position: static` 상태로 배치됩니다. position 속성은 레이아웃을 제어할 때 top, right, bottom, left 같은 방향 속성과 함께 사용되며 어떤 position 값을 주느냐에 따라 방향 속성의 동작 방식도 달라집니다.
요소가 어느 기준으로, 어디에 위치할지를 정하는 속성
✅ position의 기능
| 위치 지정 | 요소를 문서 흐름(static)에서 벗어나 자유롭게 위치시킬 수 있다. |
| 기준 설정 | relative나 absolute를 통해 다른 요소의 기준점을 설정할 수 있다. |
| 고정 배치 | fixed를 이용해 스크롤에도 움직이지 않는 요소를 만들 수 있다. |
| 스크롤 반응 | sticky를 통해 특정 위치에서 고정되도록 할 수 있다. |
2️⃣ 주요 position 종류
1. static (기본값)
- 모든 요소는 기본적으로 `position: static` 상태
- `top`, `right`, `bottom`, `left` 같은 위치 조정 속성이 적용되지 않음
- 문서 흐름에 따라 자연스럽게 배치됨
- 따로 position 설정이 필요 없을 때 사용
2. relative (상대 위치)
- 요소를 자기 자신 기준으로 이동시킴
- 원래 위치를 기준으로 `top`, `left` 등을 이용해 살짝 이동할 수 있음
- 이동하더라도 문서 흐름상 원래 자리를 그대로 차지
- 부모 요소로서 `absolute`요소의 기준이 될 수도 있음
3. absolute (절대 위치)
- 가장 가까운 `position`이 `relative`, `absolute`, `fixed`로 설정된 조상 요소를 기준으로 위치가 결정됨
- 만약 조상 요소 중에 그런 게 없다면 `body`(문서 전체)를 기준으로 삼음
- `top`, `left` 같은 속성으로 자유롭게 배치할 수 있음
- 문서 흐름에서 벗어나기 때문에 원래 자리는 사라짐
- 레이아웃 안에 독립적인 박스를 만들 때 많이 사용
4. fixed (고정 위치)
- 브라우저 화면을 기준으로 위치를 고정
- 스크롤을 해도 위치가 변하지 않음
- 광고 배너, 상단 고정 메뉴 등에 자주 사용
- 항상 화면에 떠 있어야 하는 요소에 적합
5. sticky (스크롤 따라가다 고정)
- 기본적으로는 문서 흐름(`static`)처럼 배치되다가
- 지정한 `top`, `left` 위치에 도달하면 그 위치에 고정되는 속성
- 스크롤하면서 특정 위치에 딱 붙는 UI를 만들 때 사용
- 최근 반응형 웹, 모바일 UI에서 많이 쓰임
🔥 핵심 요약
| 종류 | 기준 | 특징 |
| static | 없음 (문서 흐름) | 기본 위치, 이동 불가 |
| relative | 자기 자신 | 원래 자리 유지 + 살짝 이동 가능 |
| absolute | 가장 가까운 relative/absolute/fixed 조상 요소 | 문서 흐름 벗어나 자유 위치 |
| fixed | 브라우저(viewport) | 스크롤해도 고정 |
| sticky | 스크롤 + 위치 도달 | 위치 도달 후 고정 |
3️⃣ position 속성별 예제 코드
1. static 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position: static 예제</title>
<style>
.static-box {
width: 150px;
height: 100px;
background-color: lightblue;
margin: 10px;
position: static; /* 기본값 (사실 생략해도 됨) */
}
</style>
</head>
<body>
<h2>position: static</h2>
<div class="static-box">Static Box</div>
<div class="static-box">Static Box</div>
</body>
</html>
- 아무런 위치 조정 없이 그냥 HTML 문서 흐름(위에서 아래로)에 따라 배치
- top, left 같은 방향 조정 속성을 써도 아무 효과가 없음
- 생략해도 기본 적용
2. relative (상대 위치) 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position: relative 예제</title>
<style>
.relative-box {
width: 150px;
height: 100px;
background-color: lightgreen;
margin: 10px;
position: relative;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<h2>position: relative</h2>
<div class="relative-box">Relative Box</div>
</body>
</html>
- 요소가 원래 있어야 할 자리를 기준으로 top, left 값만큼 이동
- 위 코드에서는 아래로 20px(top: 20px), 오른쪽으로 30px(left:30px) 이동
- 문서 흐름에서 차지하는 자리(공간)은 그대로 유지
- 따라서 아래쪽에 다른 요소가 있으면 겹칠 수 있음
3. absolute (절대 위치) 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position: absolute 예제</title>
<style>
.parent-box {
position: relative; /* 기준이 되는 부모 */
width: 300px;
height: 200px;
background-color: lightgray;
margin: 20px;
}
.absolute-box {
position: absolute;
top: 20px;
left: 30px;
width: 100px;
height: 50px;
background-color: lightcoral;
}
</style>
</head>
<body>
<h2>position: absolute</h2>
<div class="parent-box">
<div class="absolute-box">Absolute Box</div>
</div>
</body>
</html>
- 가장 가까운 position이 relative/absolute/fixed로 설정된 부모 요소를 기준으로 위치가 결정
- parent-box에 postion: relative가 설정되어 있으므로 parent-box의 왼쪽 위(0,0)을 기준으로 오른쪽으로 30px, 아래로 20px 이동한 것
- 만약 parent-box에 position이 없었다면 문서 전체를 기준으로 잡음
- 기준이 되는 부모를 기준으로 완전히 새로운 위치에 배치
- 문서 흐름(자리 차지)에서 완전히 빠지게 됨 (문서 흐름상 다른 요소들이 absolute 박스가 없는 것처럼 배치되므로 다른 요소와 겹치기 쉬움)
4. fixed (고정 위치) 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position: fixed 예제</title>
<style>
.fixed-box {
position: fixed;
top: 20px;
right: 20px;
width: 120px;
height: 60px;
background-color: lightseagreen;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.content {
height: 1500px; /* 스크롤 생기게 만듦 */
background: linear-gradient(#f0f0f0, #ccc);
}
</style>
</head>
<body>
<h2>position: fixed</h2>
<div class="fixed-box">Fixed Box</div>
<div class="content">
스크롤 테스트용 긴 콘텐츠
</div>
</body>
</html>
- 브라우저 화면 기준으로 위치가 고정
- 스크롤을 내려도 항상 같은 자리에 표시
- 부모 요소와 관계 없음
5. sticky (스크롤 따라가다 고정)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>position: sticky 예제</title>
<style>
.sticky-box {
position: sticky;
top: 20px;
background-color: lightsalmon;
padding: 10px;
font-weight: bold;
font-size: 18px;
}
.content {
height: 1500px; /* 스크롤을 만들어줌 */
background: linear-gradient(white, lightgray);
padding-top: 100px;
}
</style>
</head>
<body>
<h2>position: sticky</h2>
<div class="content">
<div class="sticky-box">Sticky Box</div>
긴 스크롤 콘텐츠
</div>
</body>
</html>
- 처음엔 일반 static처럼 문서 흐름에 따라 배치되다가 스크롤을 내리면서 top: 20px 위치에 도달하면 고정됨
- 부모 요소 영역(content)안에서만 sticky가 작동
- 공간 차지함
- 상단 고정 헤더, 목차 메뉴 고정 등에 쓰임
4️⃣ 자주 틀리는 포인트 정리
☑️ static은 "기본값"이라는 점을 잊지 말자
- position을 따로 설정하지 않으면 기본값은 항상 static
- top, left, bottom, right 같은 속성은 static 상태에서는 아무 효과가 없다
✅ position을 지정하지 않았는데 이동하려 한다? → position 먼저 확인!
☑️ relative는 "공간 유지"한다
- relative는 내 자리(공간)는 유지하면서 눈에 보이는 박스만 이동한다
- 그래서 아래쪽 요소와 겹칠 수 있다
✅ "문서 흐름은 그대로 + 눈에 보이는 것만 이동" 기억!
☑️ absolute는 기준 부모를 찾는다
- absolute는 가장 가까운 relative/absolute/fixed 부모를 기준으로 위치를 잡는다
- 만약 기준 부모가 없으면, 브라우저 전체(body) 를 기준 삼는다
✅ absolute 쓸 때는 항상 부모 position 설정 여부를 먼저 확인!
☑️ fixed는 화면(viewport) 기준이다
- fixed는 부모 요소가 뭐든 상관없이 항상 브라우저 화면을 기준으로 고정된다
- 스크롤해도 절대 움직이지 않는다
✅ 부모? 그런 거 없고 화면 기준!
☑️ sticky는 스크롤하다가 "도착하면 고정"된다
- sticky는 처음엔 static처럼 흐름을 따라 배치된다
- 스크롤로 지정한 top 위치에 도달하면 거기서 멈춰서 고정된다
- 부모 요소 영역 안에서만 sticky가 작동한다
✅ 스크롤→도착→고정!
CSS에서 position 속성은 단순히 요소를 어디에 둘까를 넘어 레이아웃 전체의 흐름과 구조를 결정하는 매우 중요한 개념입니다.
특히 static, relative, absolute, fixed, sticky 각각의 차이와 동작 방식을 제대로 이해하면 디자인을 세밀하게 컨트롤할 수 있습니다. position을 사용할 때는 기준과 흐름 유지 여부를 항상 의식하면서 설계하는 습관이 중요합니다.
'🌐 Front-End' 카테고리의 다른 글
| [🎨CSS] 반응형 웹 시작하기 — viewport, 미디어쿼리, flex-wrap까지 (0) | 2025.04.06 |
|---|---|
| [🎨CSS] CSS overflow 속성 총정리 (0) | 2025.04.06 |
| [🎨CSS] CSS z-index + stacking context 총정리 (0) | 2025.04.06 |
| [🎨CSS] CSS display 속성 총정리 (0) | 2025.04.06 |
| [⚛️React] Rc-Tree로 메신저 조직도 쉽게 구현하기 (0) | 2024.10.23 |