📝 CSS position 속성: 요소를 자유롭게 배치하는 법
요소를 원하는 위치에 배치하고 싶을 때 사용하는 속성이 바로
position입니다.
종류별 특징을 제대로 이해하면 레이아웃 작업이 훨씬 쉬워집니다!
1. position이란? 💡
position은 요소를 문서 흐름에서 어떤 기준으로, 어떻게 배치할지 결정하는 속성입니다.
position: static; /* 기본값 */
position: relative; /* 현재 위치 기준 이동 */
position: absolute; /* 부모 유령 기준 이동 */
position: fixed; /* 뷰포트(화면) 기준 고정 */2. 종류별 특징 정리 🗂️
| 종류 | absolute · fixed | relative | static |
|---|---|---|---|
| 너비 | 최대한 줄어든다 | 그대로 유지 | 그대로 유지 |
| 본 질 | 유령화, 유령의집화 | 유령의집화 | 사람화 |
| 겹 침 | 겹치는 게 가능 | 겹치는 거 불가능 | 겹치는 거 불가능 |
| 이동 | top left right bottom 으로 이동, 기준은 부모 유령 | top left right bottom 으로 이동, 기준은 현재 위치 | 이동 불가 |
💡 유령화란? —
absolute,fixed를 적용하면 요소가 일반 문서 흐름에서 빠져나와 다른 요소와 겹칠 수 있는 상태가 됩니다. 마치 유령처럼 다른 요소를 뚫고 지나가는 것과 같아요!
3. static — 기본값
모든 요소의 기본 position 값입니다. 문서 흐름 그대로 배치되며 이동이 불가능합니다.
div {
position: static; /* 기본값이라 생략해도 동일 */
}[div 1]
[div 2]
[div 3]
↑ 순서대로 쌓임, 겹침 불가4. relative — 상대 위치
현재 있던 위치를 기준으로 이동합니다.
원래 자리는 그대로 유지되고(유령의집화), 다른 요소에 영향을 주지 않습니다.
.box {
position: relative;
top: 20px; /* 원래 위치에서 아래로 20px */
left: 30px; /* 원래 위치에서 오른쪽으로 30px */
}💡
relative는 단독으로 이동하는 용도보다absolute자식의 기준점을 만들어주는 용도로 더 많이 사용됩니다!
5. absolute — 절대 위치
가장 가까운 position이 지정된 부모 요소를 기준으로 이동합니다.
문서 흐름에서 완전히 빠져나와(유령화) 다른 요소와 겹칠 수 있습니다.
/* 부모 */
.parent {
position: relative; /* absolute의 기준점이 됨 */
width: 200px;
height: 200px;
}
/* 자식 */
.child {
position: absolute;
top: 0;
right: 0; /* 부모의 오른쪽 상단에 위치 */
}⚠️ 주의 —
position이 지정된 부모가 없으면<body>를 기준으로 이동합니다!
6. 📌 fixed — 고정 위치
뷰포트(화면)를 기준으로 위치가 고정됩니다.
스크롤을 내려도 항상 같은 자리에 머뭅니다.
.top-button {
position: fixed;
bottom: 20px;
right: 20px; /* 화면 오른쪽 하단에 고정 */
}사용 예시:
- 항상 보이는 상단 내비게이션
- 스크롤해도 따라오는 사이드바
- 화면 하단 고정 버튼 (맨 위로 가기)7. z-index: 겹침 순서 조절
position이 static이 아닌 요소들이 겹쳤을 때 어떤 요소가 위에 올지 결정합니다.
숫자가 클수록 위에 올라옵니다.
.box-a { z-index: 1; } /* 아래 */
.box-b { z-index: 2; } /* 위 */
.box-c { z-index: 3; } /* 가장 위 */⚠️ z-index 주의사항
position: static인 요소에는 적용되지 않습니다.z-index가 없으면 HTML에서 나중에 등장한 요소가 위에 올라갑니다.- 음수도 사용 가능합니다. (
z-index: -1)
8. 💻 실습 예제: z-index로 겹침 순서 만들기
4개의 div를 겹쳐서 z-index로 순서를 지정하는 예제입니다.
📝 HTML 구조
<section>
<div></div> <!-- 파란색 -->
<div></div> <!-- 금색 -->
<div></div> <!-- 핑크색 -->
<div></div> <!-- 초록색 -->
</section>🎨 CSS 스타일링
section {
margin-top: 500px;
width: 200px;
height: 200px;
border: 10px solid red;
}
section > div {
width: 50%;
height: 25%;
background-color: blue;
position: absolute;
/* z-index도 없고 맨 처음 등장한 유령 → 4등 */
}
section > div:nth-child(1) {
top: 0;
left: 0;
/* z-index 없음 → 가장 먼저 등장했지만 4등 */
}
section > div:nth-child(2) {
background-color: gold;
top: 10%;
left: 10%;
z-index: 2; /* 경쟁자 중 가장 큰 수 → 1등 */
}
section > div:nth-child(3) {
background-color: pink;
top: 20%;
left: 20%;
z-index: 1; /* 2 다음으로 높은 수 → 2등 */
}
section > div:nth-child(4) {
background-color: green;
top: 30%;
left: 30%;
/* z-index 없음 → 경쟁에서 밀림 → 3등 */
}🔍 겹침 순서 분석
| 순위 | 색상 | z-index | 이유 |
|---|---|---|---|
| 🥇 1등 | 금색 | 2 | z-index가 가장 큰 수 |
| 🥈 2등 | 핑크색 | 1 | z-index가 두 번째로 큰 수 |
| 🥉 3등 | 초록색 | 없음 | z-index 없이 나중에 등장 |
| 4등 | 파란색 | 없음 | z-index 없이 가장 먼저 등장 |
위 ↑
[금색 z-index:2] ← 1등
[핑크색 z-index:1] ← 2등
[초록색 없음] ← 3등
[파란색 없음] ← 4등
아래 ↓🍯 꿀팁 —
z-index가 없는 요소들끼리는 HTML에서 나중에 등장한 요소가 위에 올라갑니다.
초록색(4번째)이 파란색(1번째)보다 위에 있는 이유입니다!
9. 📖 핵심 요약
| 속성값 | 기준점 | 문서 흐름 | 겹침 | 스크롤 |
|---|---|---|---|---|
static | - | ✅ 유지 | ❌ | - |
relative | 현재 위치 | ✅ 유지 | ⚠️ 가능 | 같이 움직임 |
absolute | 부모 유령 | ❌ 이탈 | ✅ | 같이 움직임 |
fixed | 뷰포트(화면) | ❌ 이탈 | ✅ | 고정 |
📌 z-index 규칙
1. 숫자가 클수록 위에 올라갑니다.
2. z-index가 없으면 HTML 등장 순서가 늦을수록 위에 올라갑니다.
3. position: static인 요소에는 적용되지 않습니다.
