position

mskimdev·2026년 5월 19일

CSS

목록 보기

6/10

요소를 특정 위치에 고정하거나, 다른 요소 위에 겹치게 하거나, 스크롤해도 화면에 따라오게 하려면 position 속성이 필요하다. 처음에는 개념이 헷갈리지만 각 값의 기준점이 어디인지를 이해하면 풀린다.

position 속성은 요소를 어디에, 어떤 기준으로 배치할지 결정한다. top, right, bottom, left와 함께 쓰여 위치를 조정한다.

div {
  position: static;
}

모든 요소의 기본값이다. 문서 흐름에 따라 순서대로 배치되고, top, left 등 위치 속성이 적용되지 않는다.

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

원래 있어야 할 자리를 기준으로 이동한다. 원래 자리는 여전히 공간을 차지한다. 주로 absolute 자식 요소의 기준점을 만들 때 많이 쓴다.

.parent {
  position: relative; /* 기준점 역할 */
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

가장 가까운 position: relative (또는 absolute/fixed) 조상을 기준으로 배치된다. 그런 조상이 없으면 <html>(뷰포트)이 기준이 된다.

문서 흐름에서 빠져나오기 때문에 원래 자리가 사라진다. 다른 요소들이 이 요소의 자리를 무시하고 채워진다.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

브라우저 뷰포트(화면)를 기준으로 배치된다. 스크롤해도 항상 같은 위치에 고정된다. 상단 고정 헤더, 하단 고정 버튼 등에 쓰인다.

문서 흐름에서 빠져나오기 때문에 fixed 요소 아래에 콘텐츠가 가려지지 않도록 다른 요소에 padding-top을 주는 경우가 많다.

.section-title {
  position: sticky;
  top: 0;
}

relative처럼 문서 흐름에 있다가, 스크롤 시 지정한 위치(top: 0)에 닿으면 fixed처럼 고정된다. 스크롤 기반 섹션 헤더에 자주 쓰인다.

position이 static이 아닌 요소들은 z-index로 앞뒤 순서를 조절할 수 있다.

.modal {
  position: fixed;
  z-index: 1000;  /* 숫자가 클수록 앞에 표시 */
}

.overlay {
  position: fixed;
  z-index: 999;
}

z-index가 없으면 HTML에 늦게 나온 요소가 앞에 쌓인다.

값	기준	문서 흐름	스크롤
`static`	—	유지	따라감
`relative`	자기 자신 원래 위치	유지 (공간 차지)	따라감
`absolute`	가장 가까운 positioned 조상	이탈	따라감
`fixed`	뷰포트	이탈	고정
`sticky`	부모 스크롤 영역	유지 → 고정	조건부 고정