[CSS] position 제대로 이해하기 💡

 

Position?

문서상 요소 배치하는 방법

 

Static	기본값
Relative	자기 자신을 기준으로
Absolute	부모 요소를 기준으로
Fixed	뷰포트 기준으로
Sticky	스티키 스크롤

 

---

Static

 

• 기본값
• left, top, right, bottom 영향을 받지 않는다.

 

---

 

Relative

• 본인 기준으로 얼마나 움직이는가?

 

---

 

Absolute

 

• 부모 기준으로 (position: relative 값을 가진 부모)
• relative와 absolute 꼭 붙어있지 않아도 된다. static은 무시하고, 가장 가까운 부모를 찾아서 적용된다.
• 원래의 자리를 벗어나서 붕뜨게 된다.
• 원래 있던 요소를 덮어 씌울 때 사용(드롭다운, 햄버거 메뉴 etc)
• 주변 요소에 영향을 주지 않는다.

 

---

 

Fixed

 

• 다 무시하고, 최상단, 즉 뷰포트 기준으로
• 스크롤하면 위치 고정
• 헤더 고정
• 우측 하단 Top으로 가는 버튼
• 팝업 배너

 

---

 
💢 Absolute

• padding은 position: absolute의 기준이 아니다.
• 실제 absolute의 기준은 부모 (relative 값을 가진)

 

💢 Relative

• relative의 경우 padding 값도 적용
• static 기준으로 움직인다.

 

---

 

🙆🏻‍♀️ 1.  헤더 position: fixed 상태

 

• 기준은 헤더가 아니라 뷰포트 상단
• 위에 여백 답답하기 때문에 아래 요소 패딩값 높여준다.

 

 

🙅🏻‍♀️ 2. 헤더 position: fixed 아닌 상태

 

• 기준이 헤더
• 위에 여백 많이 생긴다.

 

 

📚 3. relative, absolute 적용해서 옮기기

 

[div 박스로 영역 감싸기]

 

• .img-wrap
• <div class="img-wrap">으로 묶어준다.
• CSS class에 position: relative 적용
• 왜냐하면 absolute의 기준이 position: relative를 가진 부모이기 때문이다.

 

 

[옮겨야 할 이미지]

 

• .img-2
• position: absolute 적용
• absolute 적용하면 붕뜨기 때문에 넓이로 측정되지 않는다.
• bottom: -60px로 하여 넓이의 bottom 기준에서 내려오게 한다.

 
 

---

 
 

 
영상 참고