[CSS] position 정리

Position 개념 정리

position은 HTML 요소의 위치를 지정하는 방법을 정의한다. 이 속성은 요소를 문서 내에서 배치하는 방식을 제어한다. 요소의 정확한 위치를 지정하기 위해서 top, right, bottom, left 와 함께 사용된다.

 

• static: 기본 값
• relative: 다른 요소와의 상대적 배치를 조정할 때 사용.
• absolute: 팝업 메뉴, 툴팁, 모달 창처럼 특정 위치에 고정된 요소를 만들 때 사용.
• fixed: 고정된 헤더나 푸터, 항상 보이는 버튼을 만들 때 사용.
• sticky: 스크롤 위치에 따라 고정되는 내비게이션 바를 만들 때 사용.

 

 

static (기본값)

position을 지정하지 않으면 기본적으로 static이 적용되어 있다. 요소의 기본 위치는 문서의 흐름에 따라 배치되며, 부모 요소의 위치나 다른 속성의 영향을 받지 않고 top, right, bottom, left 속성이 적용되지 않고 무시된다.

div {
  position: static;
}

 

 

relative

요소를 기본 위치(문서 흐름 내 위치)를 기준으로 top, right, bottom, left 속성을 사용해 이동할 수 있으며, 이동 후에도 원래 자리를 차지한 상태로 남아 있다.

div {
  position: relative;
  top: 10px; /* 요소를 아래로 10px 이동 */
  left: 20px; /* 요소를 오른쪽으로 20px 이동 */
}

 

 

absolute

요소를 가장 가까운 위치 설정된(즉, relative, absolute, fixed) 부모 요소를 기준으로 배치한다. 부모 요소가 위치 설정되지 않았다면 뷰포트를 기준으로 배치된다. 요소는 문서의 흐름에서 제거되며, 원래 자리 공간을 차지하지 않는다.

div {
  position: absolute;
  top: 50px;
  left: 50px;
}

 

 

fixed

요소를 뷰포트를 기준으로 고정한다. 스크롤을 해도 요소의 위치가 변하지 않는다. 문서 흐름에서 제거되며, 원래 자리 공간을 차지하지 않는다.

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

 

 

sticky

요소가 일정 영역 내에서는 relative처럼 동작하다가, 정의된 임계점에 도달하면 fixed처럼 동작한다.
top, right, bottom, left 값으로 임계점을 정의해야하며, 부모 영역을 벗어나지 않는다.

div {
  position: sticky;
  top: 10px; /* 스크롤 시 상단 10px에 고정 */
}