CSS에서 position이란?

CSS에서 position이란?

• position: 요소 위치 지정 형식 지정으로, 기본값은 static

• 웹 브라우저마다 요소의 위치들이 다를 수 있음 → 통일된 위치를 위해 사용.

  static	순서대로 배치 + 이동 X	(상대 위치 좌표)
  relative	순서대로 배치 + 좌표 이동	(상대 위치 좌표)
  absolute	부모 요소 기준 + 절대 위치 좌표 설정	(절대 위치 좌표)
  fixed	뷰포트의 초기 컨테이닝 블록을 기준 + 절대 위치 좌표 설정	(절대 위치 좌표)
  sticky	기본 relative동작 + 스크롤시 요소 고정

• 자식이 absolute이면?
  ⇒ 부모 영역의 position 속성의 값으로 relative 지정!

• position 속성과 함께 사용하는 속성

  top	위에서 떨어진 정도
  bottom	아래에서 떨어진 정도
  left	왼쪽에서 떨어진 정도
  right	오른쪽에서 떨어진 정도

---

static

• 상대 위치 좌표
• 다른 요소들과 함께 순서대로 배치 됨!
• 다른 위치 속성에 의해 위치가 이동되지 않음! ⇒ 기본값임.
  

relative

• 상대 위치 좌표
• 순서대로 배치된 위치(초기 위치)를 기준으로 위치 이동됨!
  

absolute

• 절대 위치 좌표
• 부모 요소 크기(초기 위치)를 기준으로 위치 이동됨!
  

fixed

• 절대 위치 좌표
• 화면 크기(초기 위치)를 기준으로 위치 이동됨!
  

---

position에 관한 자세한 글은 해당 링크를 참조하길 바란다!
GunBlog, CSS 기본지식 2

---