15강. position | HTML·CSS 웹 입문 24강 · 입문 — 누구나패스

🎯 학습 목표

이 강을 마치면 여러분은 요소를 기본 흐름에서 떼어내 원하는 위치에 배치하고, 요소가 겹칠 때의 앞뒤 순서까지 조절할 수 있게 됩니다. 지난 강에서 요소의 기본 배치(문서 흐름)를 배웠다면, 이번 강에서는 그 흐름을 벗어나 요소를 자유롭게 위치시키는 position 속성을 다룹니다. 고정 헤더, 겹치는 배지 같은 것을 만들 때 꼭 필요합니다.

구체적으로는 세 가지를 배웁니다. 첫째, position의 다섯 가지 값 static·relative·absolute·fixed·sticky를 이해합니다. 둘째, 위치를 정하는 top·left 등의 오프셋을 익힙니다. 셋째, 겹침 순서를 정하는 z-index를 살펴봅니다.

📍 position의 기본 — static과 relative

이 섹션에서는 position의 기본값과 첫 번째 활용을 살펴보겠습니다.

position은 요소의 위치를 어떤 방식으로 정할지를 결정하는 속성입니다. 기본값은 static으로, 지난 강에서 배운 일반 문서 흐름을 그대로 따릅니다. 즉 특별히 지정하지 않은 모든 요소가 static이며, 이 상태에서는 위치를 강제로 옮길 수 없습니다.

위치를 옮기려면 먼저 position 값을 바꿔야 합니다. 가장 온순한 것이 relative입니다. relative는 요소를 원래 자리에 그대로 두되, top·left 같은 값으로 원래 위치에서 조금씩 밀어낼 수 있게 합니다.

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

이 코드는 상자를 원래 위치에서 아래로 20px, 오른쪽으로 30px 이동시킵니다. 여기서 top: 20px은 '위에서부터 20px 밀어냄', 즉 아래로 내린다는 뜻입니다. 중요한 점은, relative는 원래 차지하던 자리는 그대로 남겨 둔 채 겉모습만 이동한다는 것입니다. 그래서 주변 요소들은 이동에 영향받지 않습니다. relative는 이렇게 미세 조정에 쓰이며, 뒤에 볼 absolute의 기준점 역할도 하는 중요한 값입니다.

🎯 absolute — 흐름에서 떼어내 배치하기

이 섹션에서는 요소를 문서 흐름에서 완전히 떼어내는 absolute를 살펴보겠습니다.

position: absolute는 요소를 일반 흐름에서 완전히 빼내어, top·left 값으로 지정한 위치에 정확히 배치합니다. relative와 달리 원래 차지하던 자리도 사라지므로, 다른 요소들이 그 빈자리를 메웁니다. 마치 요소가 공중에 떠서 원하는 좌표로 이동하는 것과 같습니다.

그렇다면 absolute 요소의 기준점은 어디일까요? 바로 가장 가까운, position이 지정된 조상 요소입니다. 그래서 보통 부모에 relative를 주고 자식에 absolute를 주는 짝을 이룹니다.

.parent {
  position: relative;
}
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

이 코드는 .parent 상자를 기준으로, .badge를 그 오른쪽 위 구석에 딱 붙입니다. 상품 카드의 'NEW' 배지나, 아이콘 위의 알림 숫자처럼 특정 위치에 겹쳐 놓는 요소를 만들 때 이 방식을 씁니다. '부모 relative + 자식 absolute'는 매우 자주 쓰이는 조합이니 꼭 기억하세요. 만약 기준이 될 조상이 없으면 페이지 전체를 기준으로 삼습니다.

📌 fixed와 sticky — 스크롤과 함께

이 섹션에서는 스크롤과 관련된 두 값, fixed와 sticky를 살펴보겠습니다.

position: fixed는 요소를 화면(뷰포트)에 고정합니다. 페이지를 아무리 스크롤해도 그 자리에 붙박이처럼 그대로 있습니다. 대표적인 예가 스크롤해도 항상 위에 떠 있는 고정 헤더나, 화면 구석의 '맨 위로' 버튼입니다.

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

이 코드는 헤더를 화면 맨 위에 가로 전체로 고정해, 스크롤과 무관하게 항상 보이게 합니다.

position: sticky는 fixed와 relative의 중간 성격입니다. 평소에는 일반 요소처럼 흐름을 따라 스크롤되다가, 정해진 위치에 다다르면 그 지점에 달라붙어 고정됩니다.

.nav {
  position: sticky;
  top: 0;
}

이렇게 하면 메뉴가 스크롤을 따라 올라가다가 화면 맨 위에 닿는 순간 그 자리에 척 붙어 멈춥니다. 스크롤을 내려도 메뉴가 계속 상단에 남아 있는, 요즘 웹사이트에서 흔히 보는 효과입니다. fixed는 '처음부터 끝까지 고정', sticky는 '평소엔 따라오다 특정 지점에서 고정'이라고 구분하면 됩니다.

🃏 겹침 순서 — z-index

이 섹션에서는 요소들이 겹칠 때 무엇이 위에 보일지를 정하는 z-index를 살펴보겠습니다.

position으로 요소를 옮기다 보면, 요소들이 서로 겹치는 상황이 생깁니다. 이때 어느 것이 앞에(위에) 보이고 어느 것이 뒤로 가려질지를 정하는 것이 z-index입니다. z-index는 숫자가 클수록 앞으로 나옵니다.

.back  { z-index: 1; }
.front { z-index: 10; }

이 경우 .front(10)가 .back(1)보다 앞에 보입니다. 카드를 트럼프처럼 쌓았을 때 위에 놓인 카드가 보이는 것과 같은 원리로, 종이를 z축(화면 깊이 방향)으로 쌓는다고 생각하면 됩니다. 한 가지 주의할 점은, z-index는 position이 지정된 요소(static이 아닌)에만 적용된다는 것입니다. 겹침 순서가 뜻대로 안 되면, 해당 요소에 position이 지정되어 있는지부터 확인하세요.

⚠️ position을 다룰 때의 주의점

이 섹션에서는 흔한 실수를 정리하겠습니다.

첫 번째, absolute의 기준을 착각하는 것입니다. absolute는 '가장 가까운 position 지정 조상'을 기준으로 합니다. 원하는 위치에 안 놓인다면, 기준이 될 부모에 relative를 줬는지 확인하세요.

두 번째, position 없이 top·left를 쓰는 것입니다. top·left 같은 오프셋은 position이 static이 아닐 때만 작동합니다. static인 상태에서 아무리 top을 줘도 움직이지 않습니다.

세 번째, fixed·absolute를 남용하는 것입니다. 이들은 요소를 흐름에서 빼내므로, 많이 쓰면 배치가 꼬이기 쉽습니다. 일반적인 배치는 다음 강들에서 배울 Flexbox·Grid로 하고, position은 겹침이나 고정이 꼭 필요한 곳에만 쓰는 것이 좋습니다.

📝 핵심 요약

이번 강에서는 position을 배웠습니다.

static·relative — static은 기본 흐름, relative는 원래 자리를 유지하며 오프셋으로 미세 이동하고 absolute의 기준이 됩니다.
absolute — 흐름에서 빼내 가장 가까운 position 지정 조상을 기준으로 배치합니다. '부모 relative + 자식 absolute'가 대표 조합입니다.
fixed·sticky — fixed는 화면에 붙박이로 고정, sticky는 평소엔 흐르다 특정 지점에서 고정됩니다.
z-index — 겹칠 때 숫자가 클수록 앞에 보이며, position이 지정된 요소에만 적용됩니다.

이제 요소를 원하는 위치에 둘 수 있게 되었습니다. 다음 강부터는 현대 웹 레이아웃의 핵심 도구인 Flexbox를 배워, 요소들을 훨씬 쉽고 강력하게 정렬하고 배치하는 법을 익히겠습니다. 다음 강 「Flexbox ①」에서 이어가겠습니다.

position