[CSS] 포지셔닝(Position) 완벽 이해와 Sticky 활용법

이번 포스팅에서는 [CSS 레이아웃 심화] 파트의 세부 주제인 Position 제어와 실전 배치에 대하여 상세히 알아보겠습니다.

1. Absolute를 활용한 '진짜' 완벽한 정중앙 정렬

팝업(Modal) 창이나 뱃지를 부모 요소의 한가운데 띄우는 가장 클래식하고 확실한 공식입니다. 부모 요소에는 반드시 position: relative가 선언되어 있어야 합니다.

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  /* top/left 50%는 부모 기준이므로 요소가 우측 하단으로 치우칩니다.
     transform을 사용해 요소 자기 자신의 너비/높이 절반만큼 위/왼쪽으로 당겨옵니다. */
  transform: translate(-50%, -50%);
}

2. Fixed를 위협하는 강력한 무기: position: sticky

스크롤을 내리다 특정 지점에 도달하면 헤더나 목차를 상단에 딱! 달라붙게 만드는 기능입니다. 과거엔 JS가 필요했지만 이젠 CSS 한 줄이면 됩니다.

.table-of-contents {
  position: sticky;
  top: 20px; /* 화면 최상단에서 20px 떨어진 곳에서부터 달라붙음 */
}
/* 주의사항: sticky 요소의 부모 태그에 overflow: hidden이 선언되어 있으면 동작하지 않습니다! */

---

지금까지 Position 속성을 이용한 중앙 정렬과 Sticky 노하우에 대해 살펴보았습니다. 위치 제어의 기본기를 탄탄히 다지면 어떤 복잡한 UI도 구현할 수 있습니다.