[CSS] position

🔍 position이란?

• 요소가 어디에 배치될지를 결정하는 CSS 속성

---

✅ position 종류

속성값	기준점	특징	겹침 가능
static	없음 (기본 문서 흐름)	기본값, 위치 이동 불가	❌
relative	자기 자신	자리 유지 + 살짝 이동 가능	❌
absolute	가장 가까운 position 지정 조상	문서 흐름 탈출, 정확한 위치 지정 가능	✅
fixed	브라우저(뷰포트)	스크롤에도 고정됨	✅
sticky	스크롤되는 부모 컨테이너	조건부 고정(스크롤 위치에 따라 변함)	❌

---

💻 예제

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%;
  position: absolute;
  background-color: blue;
}

section > div:nth-child(1) { top: 0%; left: 0%; }
section > div:nth-child(2) { background: gold; top: 10%; left: 10%; }
section > div:nth-child(3) { background: pink; top: 20%; left: 20%; }
section > div:nth-child(4) { background: green; top: 30%; left: 30%; }

실행화면

---

✅ 정밀 컨트롤을 위한 기능들

1) z-index

• 겹쳐진 요소들 중 누가 위에 보일지를 결정하는 속성

.element {
  position: relative;
  z-index: 10;
}

• position이 static이 아닌 경우에만 작동
• z-index는 형제 요소 간에만 비교 가능
• 숫자가 클수록 위에 위치 (음수 가능)

2) calc()

• CSS에서 길이, 크기 등을 수학적으로 계산할 수 있는 함수

width: calc(100% - 50px);
margin-top: calc(2rem + 10px);

• 단위 혼합 가능 (%, px, rem 등)
• 연산자: +, -, *, / 가능 (주의: 띄어쓰기 필수!)
• 반응형 레이아웃 만들 때 유용

3) transform

• 요소를 회전, 이동, 확대/축소, 기울이기 등 시각적으로 변형하는 속성

.element {
  transform: translate(50px, 20px);
}

• translate(x, y) : 위치 이동
• scale(x) : 크기 확대/축소
• rotate(deg) : 회전
• skew(x, y) : 기울이기
• matrix(...) : 복합 변형