[HTML/CSS] #2 position 속성 정리 (박스 위치 고정, 설정, static, relative, absolute, fixed, sticky)

이번에는 웹페이지의 전체적인 틀을 짜는 데에 필수적인 position 속성에 대해서 한번 정리해보겠습니다.

---

1. position 속성 값 정리(static, relative, absolute, fixed, sticky)

	위치 변경 가능 여부	위치 기준	간단한 설명
static	X	원래 있어야 할 위치	태그가 있어야 할 위치에 변경 없이 위치
relative	O	원래 있어야 할 위치	태그가 있어야 할 위치 기준으로 상하좌우를 변경
absolute	O	담겨있는 박스	이 태그가 포함된 박스의 원점을 기준으로 변경
fixed	O	웹페이지 전체	박스 상관없이 웹페이지 전체 기준으로 변경
sticky	O	원래 있어야 할 위치	스크롤을 위치 밖으로 옮겨도 화면에 보이도록 위치

 

 

---

2. 예시

See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.

---

3. 정리

• static : 기본값, 위치 변경 안됨
• relative : 원래 있어야 되는 위치에서 설정해준 만큼 이동
• absolute : 속해있는 박스 기준으로 위치 변경
• fixed : 박스에서 완전히 벗어나서 현재 보이는 웹페이지 기준으로 위치 설정
• sticky : 원래 위치에 있음, 스크롤해도 계속 남아서 보여줌

 

---

이상 웹페이지를 구성할 때 중요한 position 속성과 속성 값들을 알아보았습니다!

 

*추가사항*

absolute는 속해있는 박스 기준이 아닌 속해있는 부모 박스 중에 static 속성이 아니면서 가장 가까운 부모의 위치 기준으로 위치를 변경하게 된다.
-> 그래서 부모 박스에 아무런 position 속성 변경이 없으면 body를 기준으로 위치하게 됨