📌 CSS 위치 지정 방법 (position 속성 완벽 정리)

CSS에서 요소의 위치를 지정하는 방법에는 여러 가지 옵션이 있습니다. position 속성은 요소를 **문서의 흐름(Flow)**에서 어떻게 배치할지를 결정합니다. 이 글에서는 static, relative, absolute, fixed, sticky의 차이점을 설명하고, 각 옵션별로 예제를 제공합니다.

📌 1. position: static (기본값)

👉 문서의 기본 흐름을 따르며, 위치 조정이 불가능한 상태

✅ static은 모든 요소의 기본값으로 설정됩니다.
✅ top, left, right, bottom 속성을 사용할 수 없습니다.
✅ 문서의 흐름(Flow)에 따라 자동으로 배치됩니다.

✅ 사용 예제

.box {
    position: static; /* 기본값 */
    background: lightblue;
    width: 200px;
    height: 100px;
}

<pre class="wp-block-syntaxhighlighter-code"><div class="box">Static Box</div>
</pre>

📌 결과:
✅ static 상태에서는 기본 배치 위치에서 움직이지 않음
✅ top, left 속성을 설정해도 적용되지 않음

📌 2. position: relative (상대 위치)

👉 요소의 원래 위치를 기준으로 이동

✅ 요소가 원래 위치를 유지하면서, top, left, right, bottom 속성을 이용해 이동 가능
✅ 요소가 이동해도 원래 위치의 공간은 그대로 유지됨
✅ 다른 요소의 위치에 영향을 주지 않음

✅ 사용 예제

.relative-box {
    position: relative;
    top: 30px;  /* 원래 위치에서 30px 아래로 이동 */
    left: 20px; /* 원래 위치에서 20px 오른쪽으로 이동 */
    background: orange;
    width: 200px;
    height: 100px;
}

<pre class="wp-block-syntaxhighlighter-code"><div class="relative-box">Relative</div>
</pre>

📌 결과:
✅ 원래 있던 자리에서 이동하지만, 다른 요소에는 영향을 주지 않음

📌 3. position: absolute (절대 위치)

👉 가장 가까운 relative, absolute, fixed 부모를 기준으로 위치가 정해짐
✅ 부모 요소가 relative 상태일 때 그 부모를 기준으로 이동
✅ 만약 부모가 static이면, 문서 전체(body)를 기준으로 이동
✅ 원래 위치가 사라지고, 다른 요소들이 그 공간을 차지함

✅ 사용 예제

.parent {
    position: relative;  /* absolute 요소의 기준이 됨 */
    width: 300px;
    height: 300px;
    background: lightgray;
}

.absolute-box {
    position: absolute;
    top: 50px;
    left: 50px;
    background: blue;
    width: 100px;
    height: 100px;
}

<pre class="wp-block-syntaxhighlighter-code"><div class="parent">
    <div class="absolute-box">Absolute</div>
</div>
</pre>

📌 결과:
✅ .absolute-box는 .parent의 왼쪽 상단을 기준으로 top: 50px, left: 50px 위치에 배치됨
✅ 부모가 relative일 때 그 부모를 기준으로 위치가 조정됨
✅ 부모가 static이면, 전체 문서(body)를 기준으로 배치됨

📌 4. position: fixed (고정 위치)

👉 화면(뷰포트)을 기준으로 위치가 고정됨

✅ 스크롤을 해도 항상 같은 위치에 고정
✅ 부모 요소에 영향을 받지 않고 화면을 기준으로 위치가 정해짐
✅ 네비게이션 바, 채팅 버튼, 공지 배너 등에 자주 사용

✅ 사용 예제

.fixed-box {
    position: fixed;
    top: 20px;
    right: 20px;
    background: green;
    color: white;
    padding: 10px;
}

<pre class="wp-block-syntaxhighlighter-code"><div class="fixed-box">Fixed Box</div>
</pre>

📌 결과:
✅ top: 20px, right: 20px의 위치에 고정됨
✅ 스크롤을 해도 항상 같은 위치 유지

📌 5. position: sticky (스크롤 시 특정 위치에서 고정)

👉 스크롤을 내리다가 특정 위치에 도달하면 고정됨

✅ 특정 지점까지는 일반적인 문서 흐름을 따르다가, 지정된 위치에 도달하면 고정됨
✅ top, left, right, bottom을 지정해야 동작함
✅ 네비게이션 바, 광고 배너 등에 자주 사용

✅ 사용 예제

.sticky-box {
    position: sticky;
    top: 0px; /* 상단에 도달하면 고정됨 */
    background: yellow;
    padding: 10px;
}

<pre class="wp-block-syntaxhighlighter-code"><div class="sticky-box">나는 스크롤하면 고정됨</div>
</pre>

📌 결과:
✅ 스크롤을 내릴 때 top: 0px 위치에 도달하면 고정됨
✅ 그 전까지는 static처럼 움직임

📌 6. z-index를 활용한 요소 배치

✅ position과 함께 z-index 속성을 사용하면 겹치는 요소들의 순서를 조정할 수 있음

✅ 사용 예제

.box1 {
    position: absolute;
    left: 50px;
    top: 50px;
    background: red;
    width: 100px;
    height: 100px;
    z-index: 10; /* 위에 배치됨 */
}

.box2 {
    position: absolute;
    left: 70px;
    top: 70px;
    background: blue;
    width: 100px;
    height: 100px;
    z-index: 5; /* 아래에 배치됨 */
}

📌 결과:
✅ z-index 값이 높은 요소가 위쪽에 배치됨

📌 최종 정리

✅ relative + absolute 조합이 가장 많이 사용됨
✅ 스크롤과 관계없이 화면에 고정하려면 fixed 사용
✅ 스크롤할 때 특정 위치에서 고정하려면 sticky 사용