CSS position 속성 생성기

GUI로 static·relative·absolute·fixed·sticky 5가지 CSS position 값을 전환하며 top/right/bottom/left와 z-index의 효과를 실시간 미리보기로 확인하고, 해당 CSS 코드를 무료로 생성할 수 있습니다.

마지막 업데이트: 2026-09-20

position의 다섯 값을 나란히 놓고 견주기

`position`은 요소가 어디에 놓일지를 정하는 속성으로 `static`·`relative`·`absolute`·`fixed`·`sticky`의 다섯 값을 갖습니다. 이 도구는 이들 사이를 오가며 `top`·`right`·`bottom`·`left`와 `z-index`가 어떻게 듣는지를 그 자리에서 확인하고 CSS를 만들어 냅니다.

**`absolute`로 놓은 요소가 엉뚱한 자리로 날아가는 까닭은 거의 언제나 하나입니다. 「`position`이 `static`이 아닌 가장 가까운 조상」을 기준으로 놓이기 때문입니다.** 그런 조상이 하나도 없으면 요소는 페이지 전체를 기준으로 삼아 버립니다. **부모에 `position: relative`를 붙이는 것을 잊은 것**이 이런 일의 거의 전부입니다. **`sticky`에도 널리 알려진 함정이 있어, 조상 가운데 어디엔가 `overflow: hidden`이나 `overflow: auto`가 있으면 달라붙지 않습니다.** 또 `z-index`는 「쌓임 맥락」이라는 겹겹의 단위 안에서 닫히므로, **바깥보다 아래에 있는 맥락에 든 요소는 값을 아무리 키워도 그 위로 올라서지 못합니다.**

사용하는 방법

position의 값을 바꿉니다 다섯 가지를 차례로 시험해 보면 저마다 무엇을 기준으로 삼는지가 드러납니다.
오프셋을 움직입니다 **값이 `static`일 때에만 `top` 따위가 전혀 듣지 않는다는 점을 확인해 보십시오.**
z-index를 바꿉니다 겹치는 차례가 어떻게 바뀌는지 볼 수 있습니다.
만들어진 CSS를 복사합니다 노린 자리가 나오면 그대로 코드에 붙여 넣을 수 있습니다.

더 잘 활용하기 위한 팁

position: relative로 전환하고 top/left를 설정하면 Box B가 원래 위치에서 시각적으로만 이동합니다. Box C(뒤 요소)의 위치는 전혀 바뀌지 않는다는 점에 주목하세요.
absolute나 fixed로 전환하면 Box B가 일반적인 문서 흐름에서 완전히 벗어나므로, Box C가 그만큼 앞으로 당겨져 배치되는 모습을 확인할 수 있습니다.
z-index는 요소가 겹칠 때 쌓임 순서를 결정하지만 position: static인 요소에는 효과가 없습니다. "z-index 지정"을 테스트하기 전에 position을 먼저 바꿔보세요.
position: sticky는 스크롤 가능한 컨테이너 안에서만 효과가 있습니다. 미리보기 영역 자체를 스크롤해서 요소가 중간에 고정되는 모습을 확인해 보세요.
생성된 CSS 코드는 복사해서 그대로 자신의 스타일시트에 붙여넣을 수 있습니다. 실제 페이지에서도 같은 모양이 되는지 확인해 보세요.

이럴 때 쓸 수 있습니다

머리글을 화면 위에 붙여 둘 때

**`sticky`를 쓰면 스크롤해도 머리글이 그 자리에 남습니다.**

배지나 아이콘을 모서리에 겹칠 때

부모에 `relative`, 자식에 `absolute`가 가장 기본이 되는 짜임입니다.

고정된 단추를 둘 때

`fixed`는 화면을 기준으로 놓이므로 아무리 스크롤해도 움직이지 않습니다.

겹침의 탈을 살필 때

**어떤 요소가 다른 요소 아래로 숨는다면 쌓임 맥락을 먼저 의심할 수 있습니다.**

position 용어

static: 기본값입니다. **이 값인 동안에는 `top` 같은 오프셋도 `z-index`도 듣지 않습니다.**
relative: **본래 놓였을 자리를 기준으로** 요소를 비껴 놓습니다. 저는 움직여도 원래 자리는 그대로 비워 둡니다.
absolute: **`position`이 `static`이 아닌 가장 가까운 조상을 기준으로 놓습니다.** 그런 조상이 없으면 페이지 전체가 기준이 됩니다.
fixed: 화면(뷰포트)을 기준으로 놓이므로 아무리 스크롤해도 자리가 바뀌지 않습니다.
sticky: 여느 자리에 있다가 주어진 오프셋에 이르면 달라붙습니다. **조상에 `overflow`가 있으면 듣지 않습니다.**
쌓임 맥락: 겹치는 차례가 닫히는 겹겹의 단위입니다. **그 안의 `z-index`는 바깥 요소와 곧바로 견줄 수 없습니다.**

자주 묻는 질문

absolute는 "가장 가까운 위치 지정 조상 요소"(position이 static이 아닌 가장 가까운 부모)를 기준으로 배치되며, 그런 조상이 없으면 결국 페이지 전체(초기 포함 블록)를 기준으로 삼습니다. 반면 fixed는 항상 브라우저 뷰포트를 기준으로 배치되므로, 페이지를 스크롤해도 화면상 같은 위치에 계속 머무릅니다.

가장 흔한 원인은 부모 요소에 overflow: hidden이나 overflow: auto가 지정되어 있거나, 부모 요소의 높이가 sticky 요소 자체와 거의 같아서 고정될 여유 공간이 없거나, top 같은 오프셋을 아예 지정하지 않은 경우입니다. 또한 sticky의 효과는 부모 컨테이너 범위 안에서만 발생하므로, 부모 요소 자체가 스크롤 영역으로 설계되어 있어야 합니다.

relative는 요소 자신이 position: static이었을 때 차지했을 원래 위치를 기준으로, top/right/bottom/left 값만큼 시각적으로 이동시킵니다. 요소가 차지하는 공간(다른 요소에 미치는 영향)은 원래 위치 그대로 계속 확보된다는 점이 absolute와의 큰 차이입니다.

z-index는 position: static이 아닌 요소(relative·absolute·fixed·sticky)에만 효과가 있습니다. 또한 부모 요소에 transform이나 opacity처럼 position 외의 스타일이 함께 지정되어 있으면 독자적인 쌓임 맥락(stacking context)이 생성되어, 자식 요소의 z-index가 기대한 대로 작동하지 않을 수 있습니다.

기준으로 삼고 싶은 부모 요소에 position: relative를 지정하는 것이 일반적인 방법입니다. 오프셋 값을 지정하지 않아도 position: relative만 추가하면 "위치가 지정된 요소"가 되며, 그 하위의 absolute 요소는 해당 요소의 안쪽 가장자리를 기준으로 배치됩니다.

여담 ― position: sticky가 표준화되기까지의 여정

CSS에는 오래전부터 static·relative·absolute·fixed 4가지 값이 존재했지만, "스크롤하다 어느 지점부터 고정되는" 헤더나 사이드바를 구현하려면 오랫동안 JavaScript로 스크롤 이벤트를 감시하며 position: fixed로 수동 전환하는 방법밖에 없었습니다. CSS만으로 이 동작을 표현할 방법은 없었던 것입니다.

position: sticky의 아이디어 자체는 2012년경 CSS Positioned Layout Module Level 3 명세에 이미 포함되어 있었지만, 구현이 까다로워 Safari가 벤더 프리픽스(-webkit-sticky)를 붙인 형태로 먼저 구현한 것이 2013년경이었습니다. Chrome이 표준 sticky 키워드를 지원한 것은 2017년이었고, Firefox를 포함한 주요 브라우저에서 안심하고 쓸 수 있게 된 것은 그로부터 몇 년이 더 지난 2020년 무렵이었습니다.

position: sticky의 "스크롤 도중 고정되는" 동작은 구현상 relative와 fixed의 하이브리드로 설명할 수 있습니다. 평소에는 relative처럼 일반적인 흐름을 따르다가, 스크롤 위치가 지정된 오프셋에 도달하면 그 자리에서 fixed로 전환된 것처럼 동작합니다. 이 전환이 부모 요소의 스크롤 범위 안에서만 일어난다는 점이, sticky가 의도치 않게 "작동하지 않는다"고 느껴지는 원인의 상당수를 차지합니다.

오늘날 sticky는 테이블의 헤더 행을 고정하거나 목차를 스크롤에 따라오게 하는 등, 웹 디자인의 정석 기법으로 널리 쓰이고 있습니다. JavaScript로 스크롤을 감시할 필요가 없어진 것은 성능과 코드 단순함 양쪽 모두에서 큰 진전이었습니다.

모든 여담 보기