[CSS] position 실전 활용 예제: 다양한 레이아웃 만들기

[CSS] position 실전 활용 예제: 다양한 레이아웃 만들기

앞서 relative vs absolute 그리고 fixed vs sticky를 살펴봤다면,
이제는 position 속성을 실제 레이아웃에 어떻게 적용하는지 알아볼 차례입니다.

---

1. 레이어 팝업 만들기 (absolute)

position: absolute를 사용하면 부모 요소 기준으로 자유롭게 배치가 가능합니다.

<div class="container">
  버튼을 눌렀을 때 나오는 팝업
  <div class="popup">이건 팝업입니다!</div>
</div>

.container {
  position: relative;
}

.popup {
  position: absolute;
  top: 40px;
  left: 0;
  background: #fefefe;
  border: 1px solid #ccc;
  padding: 10px;
}

팁: 부모에 relative를 주면 자식 absolute 위치 지정이 쉬워요.

---

2. 화면 우측 상단 고정 버튼 (fixed)

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

.go-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background: #333;
  color: white;
  border-radius: 50%;
}

스크롤해도 항상 보이게 하고 싶은 버튼에 유용합니다.
예: "Top으로 가기" 버튼

---

3. 섹션별 고정 헤더 (sticky)

<h2 class="sticky-header">Section 1</h2>
<p>내용이 많아서 스크롤이 생깁니다...</p>

.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

sticky는 스크롤이 시작되기 전까진 일반 흐름을 따르다가,
top 위치에 도달하면 고정되는 스마트한 방식이에요.

---

4. 배경에 고정된 이미지 (absolute + z-index)

<div class="banner">
  <img src="bg.png" class="bg-image" alt="배경">
  <h1>메인 타이틀</h1>
</div>

.banner {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.banner h1 {
  position: relative;
  z-index: 2;
  color: white;
}

z-index를 활용하면 요소 간 순서까지 조정할 수 있습니다.

---

🧠 마무리 요약

• relative는 기준을 만들기 위한 속성
• absolute는 부모 기준 자유 배치
• fixed는 화면 고정
• sticky는 조건부 고정
• z-index로 요소 순서를 제어 가능

이제 다양한 position 속성을 활용한 실전 UI 제작이 가능해졌어요!
다음 글에서는 Flexbox와 Position을 조합하여 더욱 유연한 레이아웃 만드는 방법을 알려드릴게요 😊