CSS position 속성 생성기
GUI로 static·relative·absolute·fixed·sticky 5가지 CSS position 값을 전환하며 top/right/bottom/left와 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 코드는 복사해서 그대로 자신의 스타일시트에 붙여넣을 수 있습니다. 실제 페이지에서도 같은 모양이 되는지 확인해 보세요.
자주 묻는 질문
여담 ― 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로 스크롤을 감시할 필요가 없어진 것은 성능과 코드 단순함 양쪽 모두에서 큰 진전이었습니다.