Position

position 종류 및 설명

CSS에서 position 속성은 요소가 문서 내에서 어떻게 배치되는지를 정의합니다.

| 값 | 설명 | |-----------|------| | static | 기본값으로, 요소는 문서의 일반적인 흐름에 따라 배치됩니다. top, left 등의 좌표 속성은 무시됩니다. | | relative | 요소를 일반 흐름에 따라 배치한 후, top, left, right, bottom 값을 기준으로 상대적으로 이동합니다. 원래 자리의 공간은 그대로 유지됩니다. | | absolute | 가장 가까운 position이 relative, absolute, fixed, sticky 중 하나인 조상 요소를 기준으로 절대 위치에 배치됩니다. 해당 요소는 문서 흐름에서 제거됩니다. | | fixed | **브라우저 뷰포트(화면 전체)**를 기준으로 위치가 고정되며, 스크롤해도 움직이지 않습니다. | | sticky | 요소가 스크롤 위치에 따라 relative처럼 시작하다가 특정 위치에 도달하면 fixed처럼 고정되는 하이브리드 방식입니다. 주로 헤더/푸터 고정에 사용됩니다. 부모 컨테이너를 벗어나면 sticky 상태가 해제됩니다. |

static vs fixed

position: fixed와 position: sticky는 요소를 고정하는 방식이 다릅니다. 둘 다 “스크롤 시 위치를 유지”할 수 있지만, 동작 방식에 큰 차이가 있어요

차이요약

| 속성 | 설명 | | ------------------ | --------------------------------------------------------------------- | | position: fixed | 화면(viewport)에 고정 — 스크롤해도 항상 같은 위치에 있음. 부모나 다른 요소와는 상관 없음. | | position: sticky | 부모(스크롤 컨테이너) 안에서 고정 — 스크롤이 특정 위치에 도달하면 그때부터 고정됨. 부모 영역을 벗어나면 사라짐. |

예시로 차이 이해하기

• position: fixed

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

이 경우 footer는 브라우저 하단에 항상 고정됨. 스크롤해도 따라오지 않고, 항상 하단에 보임.
페이지의 어떤 위치에 있어도 상관없이 뷰포트 기준으로 고정됨.

• position: sticky

.footer {
  position: sticky;
  bottom: 0;
}

이 경우 footer는 부모 요소 안에서만 고정됨.
예를 들어 container가 스크롤 가능한 요소라면, 그 내부를 스크롤할 때 footer는 bottom: 0에 도달하면 그 위치에 고정됨.
하지만 container를 벗어나면 더 이상 보이지 않음. (즉, 부모의 범위를 벗어나면 sticky 효과도 사라짐)

언제 무엇을 써야 하나?

| 상황 | 추천 속성 | | ---------------------------- | --------------------------------------- | | 항상 화면 하단에 고정 | fixed | | 부모 컨테이너 내에서만 고정하고 싶을 때 | sticky | | 반응형 + container 너비 제한하고 싶을 때 | sticky (또는 absolute + container 기준) |

position 관련 속성 정리

| 속성 | 설명 | |------------------|------| | top | 위치 지정 속성 중 하나로, 요소의 위쪽 경계를 기준으로 이동 거리를 지정합니다. position이 relative, absolute, fixed, sticky일 때만 동작합니다. | | right | 요소의 오른쪽 경계 기준 위치 지정. | | bottom | 요소의 아래쪽 경계 기준 위치 지정. | | left | 요소의 왼쪽 경계 기준 위치 지정. | | z-index | 요소의 쌓이는 순서를 지정합니다. 값이 클수록 위에 배치됩니다. position이 static이 아닌 요소에서만 동작합니다. | | inset | top, right, bottom, left를 축약해서 쓰는 shorthand 속성입니다. 예: inset: 10px 20px 30px 40px; | | visibility | 요소의 가시성을 제어합니다. visible, hidden, collapse 값 사용 가능. hidden은 요소를 보이지 않게 하지만 레이아웃 상 공간은 유지됩니다. | | clip-path | 요소의 렌더링 영역을 도형(원, 다각형 등)으로 클리핑할 수 있습니다. clip은 더 이상 권장되지 않으며, clip-path로 대체되었습니다. | | width | 요소의 너비를 설정합니다. px, %, em, vw 등 다양한 단위를 사용하거나 auto를 지정할 수 있습니다. | | height | 요소의 높이를 설정합니다. 방식은 width와 동일합니다. | | background-color | 요소의 배경 색상을 지정합니다. | | background-image | 요소의 배경 이미지 경로를 지정합니다. 예: background-image: url('image.png'); |

📌 참고:
오래된 clip, layer-background-color, layer-background-image 등은 HTML4 이전 시대의 레거시 브라우저(MSIE/Netscape)에서 사용되던 속성으로, 현재는 대부분 비표준이며 지원되지 않으므로 사용을 권장하지 않습니다.