CSS Position 속성의 실전 응용 예제

📚 Position 속성의 실전 응용 예제

🔖 실제 많이 쓰이는 3가지 예시

✅ 예시1: position: relative의 실전 활용

평소보다 살짝 이동하고 싶을 때 사용합니다.

• 버튼이나 배너를 원래 위치에서 조금만 움직이고 싶을 때

예시: "버튼을 원래 위치에서 살짝 위로 이동시키기"

HTML

<div class="box">버튼</div>

CSS

.box {
  position: relative;
  top: -10px; /* 원래 위치보다 위로 10px 이동 */
  left: 20px; /* 원래 위치보다 오른쪽으로 20px 이동 */
}

결과 설명
원래 위치를 기준으로 위쪽으로 10px, 오른쪽으로 20px 이동합니다.

---

✅ 예시2: position: absolute의 실전 활용

부모 요소 내에서 원하는 위치에 정확히 배치하고 싶을 때 사용합니다.

• 사진 위에 글씨(배지)를 올리는 경우
• 카드 디자인에서 특정 위치(모서리 등)에 가격 태그를 붙이는 경우

예시: "이미지 위에 할인 배지 붙이기"

HTML

<div class="card">
  <img src="상품.jpg" alt="상품이미지">
  <span class="badge">30% SALE</span>
</div>

CSS

.card {
  position: relative; /* 기준점 설정 필수 */
  width: 200px;
}

.card img {
  width: 100%;
}

.badge {
  position: absolute; /* 부모(.card)를 기준으로 위치 잡기 */
  top: 10px; /* 부모의 위에서 10px */
  right: 10px; /* 부모의 오른쪽에서 10px */
  background-color: red;
  color: white;
  padding: 5px;
}

결과 설명
이렇게 하면 배지가 부모 요소(.card)의 위쪽 오른쪽 모서리에 정확히 위치하게 됩니다.
(쇼핑몰에서 자주 보는 효과입니다.)

---

✅ 예시3: position: fixed의 실전 활용

항상 화면 위에 고정시키고 싶을 때 사용합니다.

• 화면의 아래쪽에 항상 떠있는 채팅 버튼
• 스크롤해도 따라다니는 메뉴바
• 페이지 맨 위로 올라가는 버튼

예시: "화면 오른쪽 아래에 항상 고정된 버튼 만들기"

HTML

<button class="go-top">⬆ 위로 가기</button>

CSS

.go-top {
  position: fixed; /* 화면 기준 고정 */
  bottom: 20px; /* 화면 아래쪽에서 20px 위에 */
  right: 20px; /* 화면 오른쪽에서 20px 왼쪽에 */
  background-color: black;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

결과 설명
이렇게 하면 버튼이 스크롤을 내려도 항상 같은 위치(오른쪽 아래)에 고정되어 따라다닙니다.

---

✅ 예시4: position: sticky의 실전 활용

스크롤 시 특정 지점에서 따라붙게 하고 싶을 때 사용합니다.

• 뉴스 사이트에서 스크롤하면 따라붙는 목차나 카테고리 제목
• 긴 문서에서 현재 읽고있는 부분을 안내하는 헤더 메뉴

예시: "스크롤하면 따라붙는 제목 만들기"

HTML

<div class="long-article">
  <h2 class="sticky-title">챕터 1. 레이아웃 배우기</h2>
  <p>내용이 길게 이어짐...</p>
</div>

CSS

.sticky-title {
  position: sticky;
  top: 0; /* 스크롤이 위에 닿으면 화면 위에 고정됨 */
  background-color: yellow;
  padding: 10px;
}

결과 설명
스크롤을 내릴 때 제목(sticky-title)이 화면 위쪽에 붙어서 따라 내려옵니다. (뉴스나 블로그에서 자주 보는 기능입니다.)

---

📌 초보자가 자주하는 실수 정리

실수 예시올바른 방법

absolute를 사용하는데 부모 요소에 position: relative;를 안 준다.	✅ 부모 요소에 항상 position: relative;를 줘서 기준을 만드세요.
fixed를 썼는데 스크롤 시 움직인다.	✅ 절대 움직이지 않습니다. 움직인다면 코드 오타나 다른 CSS의 충돌이 있는지 확인!
sticky가 안 움직인다.	✅ sticky는 부모 요소의 overflow 값이 hidden, auto, scroll 이면 제대로 작동하지 않을 수 있습니다. 부모 요소 설정 확인!

---

🚩 요약

position                             사용처                                                        실생활 예

✅ relative	원래 위치를 기준으로 이동	버튼 위치 미세조정
✅ absolute	부모 요소 내에서 정확한 위치 지정	이미지 위에 배지(할인표시) 붙이기
✅ fixed	화면 기준으로 고정	카톡 상담버튼, 메뉴바
✅ sticky	스크롤 시 따라붙기	뉴스 기사 제목

---

✏️ 직접 연습해보기

직접 위 예제 중 하나만 골라서 (예: absolute 배지 붙이기)
온라인 코드 에디터에서 간단히 따라하기

👉 온라인 간편 코드 연습장 바로가기