요약

Position	기준점	원래 위치 유지
static	없음 (일반 문서 흐름)	예
relative	자신의 원래 위치	예 (원래 위치에서 상대적으로 이동)
absolute	가장 가까운 위치 지정된 조상 요소	아니오 (문서 흐름에서 제거)
fixed	뷰포트	아니오 (문서 흐름에서 제거)
sticky	자신의 원래 위치 (스크롤 위치에 따라)	예 (특정 조건 하에서만 고정)

position이란?

• CSS의 position 속성은 요소의 위치 지정 방식을 결정한다.

• 어디서부터 얼만큼 움직일 것인지 파악하는 기준과 기존에 존재하던 위치는 어떻게 처리되는지도 고려해야 한다.

• 즉, position을 사용할 때 기준과 원래 위치에 대해 고려해야 한다.

---

position 속성

static

기본값 position 설정이 없으면 모두 static을 기본값을 가지고 있다.

div {
	position: static;
}

이 속성은 기본값으로 입력하지 않아도 설정되어 있다.
기준 코드의 작성 순서에 따라 기본적으로 지정되는 요소의 위치
이 상태에서는 위치를 변경할 수 없다.
원래 위치 그대로 유지

---

relative

div {
	position: relative;
}

기준 기본 위치
원래 위치 그대로 유지 ( 다른 요소가 침범하지 않고 빈 자리로 유지됨 )
기준을 정했으니 위치를 이동할 수 있다.

div {
	position: relative;
	top: 10px;
	left: 10px;
	...
}

top, left, right, bottom을 사용하여 기준으로부터 움직일 수 있다.

---

absolute

div {
	position: absolute;
	top: 10px;
	left: 10px;
	...
}

기준 position 값이 static이 아닌 값을 가진 상위 요소, 없으면 이 기준

원래 위치 사라짐

예시) 모달창, 네비게이션 바 등 겹쳐지고 유지되는 요소

---

fixed

  div {
  position: fixed;
  top: 0;
  ...
  }

기준 viewport (브라우저 창)

원래 위치 사라짐

요소를 화면에 고정 시킬 때 사용한다.

• 예시) 왼쪽에 고정되어있는 부분
  

이처럼 상단에 고정된 네비게이션 바 또는 하단에 고정된 푸터 등에 사용된다.

---

sticky

div {
	position: sticky;
}

기준 부모 요소의 영역

원래 위치 유지

부모 요소 내에서 고정(fixed)상태를 유지하다가 부모 요소가 끝나면 relative가 되어 부모 요소를 따라 감

• 예시) 애플 아이폰 구매 사이트
  

---

요약

Position	기준점	원래 위치 유지
static	없음 (일반 문서 흐름)	예
relative	자신의 원래 위치	예 (원래 위치에서 상대적으로 이동)
absolute	가장 가까운 위치 지정된 조상 요소	아니오 (문서 흐름에서 제거)
fixed	뷰포트	아니오 (문서 흐름에서 제거)
sticky	자신의 원래 위치 (스크롤 위치에 따라)	예 (특정 조건 하에서만 고정)