CSS position 사용 방법, position: absolute; position: relative;

position: absolute를 파헤쳐보자!

position: absolute를 사용하면!

아마~ relative만을 찾으려고 하는 사람들이 많을 것 이다!

 

왜냐??

보통 position: relative + position: absolute 조합을 많이 사용하기에!

absolute는 relative를 기준!으로 한다고 생각한다!

 

하!지!만!

relative만 찾는 것이 아닌! 

position: static이 아닌 부모 요소를 찾을 때까지 계속 찾는 중이라고 생각해야 한다.

 

즉!!!

position: absolute는 position: static이 아닌 부모를 만날 때까지 위로 올라가며,
그 부모를 기준으로 top, left 등을 계산한다.

---

 

좀 더 쉽게 말하자면?!?!?!

 

1. 기본값인 static은 기준이 될 수 없다

모든 요소는 기본적으로 position: static; 상태이다!
이 상태에서는 위치 기준이 되는 박스(포지셔닝 컨텍스트)를 만들지 않는다.

 

그래서 absolute 입장에서는

• position: static; 인 부모 → 기준 X
• position: relative / absolute / fixed / sticky;인 부모 → 기준 O

즉, static만 아니면 다 기준이 될 수 있다

 

 

2. absolute는 이렇게 부모를 찾는다 (위로 쭉 타고 올라감)

1. 나 자신(absolute 요소)의 바로 위 부모를 본다.
2. 그 부모가
   • position: relative / absolute / fixed / sticky 중 하나면 → 너 기준으로 위치 잡을게
   • position: static이면 → 넌 기준이 아니네, 한 단계 더 위로 올라가자
3. 이 과정을 계속 반복
4. 끝까지 올라갔는데도 다 static이면 → 브라우저 뷰포트(화면 전체)를 기준으로 위치 잡음

 

 

3. 기준이 될 수 있는 position 값들

 

absolute의 기준이 될 수 있는 값은 아래 4가지

• position: relative;
• position: absolute;
• position: fixed;
• position: sticky;

이 중 뭐가 되든 상관 없고,
static이 아닌 것 중에서 제일 가까운 부모가 기준 이다!