CSS position 속성

CSS position 속성

CSS에서 position 속성은 요소의 위치를 제어하는 데 사용된다. 주요 값으로는 static, relative, absolute, fixed, sticky가 있다.

1. Static

기본적으로 모든 요소는 static이다. 위치 지정이 없으므로 요소는 문서의 흐름에 따라 배치된다.

<div class="box">Box 1</div>
<div class="box">Box 2</div>

.box {
    background-color: lightblue;
    margin: 10px;
    padding: 20px;
}

2. Relative

position: relative는 요소를 원래 위치에서 이동시키되, 다른 요소의 위치에는 영향을 주지 않는다.

<div class="relative-container">
    <div class="box relative-box">Relative Box</div>
    <div class="box">Another Box</div>
</div>

.relative-container {
    border: 2px solid black;
    padding: 20px;
}

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

결과: "Relative Box"는 원래 위치에서 아래로 20px, 오른쪽으로 30px 이동하지만, "Another Box"는 여전히 원래 위치에 있다.

3. Absolute

position: absolute는 가장 가까운 position이 설정된 조상 요소를 기준으로 위치한다. 문서의 흐름에서 벗어나기 때문에 다른 요소에 영향을 주지 않는다.

<div class="absolute-container">
    <div class="box">Parent Box</div>
    <div class="box absolute-box">Absolute Box</div>
</div>

.absolute-container {
    position: relative; /* 자식 요소의 기준이 되는 부모 요소 */
    border: 2px solid black;
    padding: 20px;
}

.absolute-box {
    position: absolute;
    top: 10px; /* 부모 박스의 상단에서 10px 아래 */
    right: 10px; /* 부모 박스의 오른쪽에서 10px 왼쪽 */
    background-color: lightgreen;
}

결과: "Absolute Box"는 "Parent Box"의 오른쪽 상단에서 10px 떨어진 위치에 나타난다.

4. Fixed

position: fixed는 뷰포트를 기준으로 위치한다. 페이지를 스크롤해도 위치가 고정된다.

<div class="fixed-box">Fixed Box</div>
<div style="height: 1500px;">Scroll down to see the effect.</div>

.fixed-box {
    position: fixed;
    top: 10px; /* 뷰포트 상단에서 10px */
    right: 10px; /* 뷰포트 오른쪽에서 10px */
    background-color: lightgoldenrodyellow;
}

결과: "Fixed Box"는 항상 화면의 오른쪽 상단데 고정되어 있다.

5. Sticky

position: sticky는 상대적인 위치로 시작하지만, 스크롤 시 특정 위치에 도달하면 고정된다.

<div class="sticky-container">
    <div class="sticky-box">Sticky Box</div>
    <div style="height: 1000px;">Scroll down to see the sticky effect.</div>
</div>

.sticky-container {
    border: 2px solid black;
    padding: 20px;
}

.sticky-box {
    position: sticky;
    top: 0; /* 상단에 도달하면 고정 */
    background-color: lightpink;
}

결과: "Sticky Box"는 스크롤을 내리면 상단에 고정되지만, 원래 위치를 지나치면 다시 흐름으로 돌아간다.

요약

• Static: 기본 배치, 문서 흐름에 따라 위치
• Relative: 원래 위치에서 이동, 다른 요소에 영향 없음
• Absolute: 조상 요소를 기준으로 위치, 문서 흐름에서 벗어남
• Fixed: 뷰포트를 기준으로 고정, 스크롤에 영향을 받지 않음
• Sticky: 상대적으로 위치하다가 특정 위치에 도달하면 고정