위치 지정 Style 속성 정리

위치 지정 Style 속성 정리 updated_at: 2025-07-21 14:24

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)에서 사용되던 속성으로, 현재는 대부분 비표준이며 지원되지 않으므로 사용을 권장하지 않습니다.