position 속성이란?

CSS Position 속성 이해하기

웹 페이지 레이아웃을 구성할 때 CSS의 position 속성은 요소의 배치를 정의하는 핵심 수단입니다. 이 속성은 요소가 문서 흐름에서 어떻게 처리될지, 다른 요소들과 어떤 상호 작용을 할지 결정합니다. position 속성에는 여러 값이 있으며, 각각의 특성을 이해하는 것이 중요합니다.

Position 속성의 종류

1. Static

• 기본값입니다.
• 요소가 문서의 흐름대로 배치됩니다.
• top, right, bottom, left 속성이 적용되지 않습니다.

2. Relative

• 요소를 기본 위치에서 상대적으로 이동시킬 수 있습니다.
• 원래 위치는 문서 흐름상 유지되며, 요소는 해당 공간을 계속 차지합니다.
• 이동은 top, right, bottom, left 속성으로 조절합니다.

3. Absolute

• 가장 가까운 위치 지정 조상에 대해 상대적으로 배치됩니다.
• 조상 요소 중 position이 static이 아닌 것을 기준으로 삼습니다.
• 요소는 문서 흐름에서 제거되어 다른 요소들에 영향을 주지 않습니다.
• 위치는 top, right, bottom, left로 결정됩니다.

4. Fixed

• 요소는 뷰포트에 대해 고정되며, 스크롤 시에도 같은 위치에 유지됩니다.
• 뷰포트는 브라우저 창을 의미합니다.
• 문서 흐름에서 제거되며, top, right, bottom, left로 위치를 지정할 수 있습니다.

5. Sticky

• 스크롤 위치에 따라 relative과 fixed의 성질을 결합합니다.
• 특정 임계점(예: top: 10px)에 도달할 때까지는 relative, 도달한 후는 fixed 처럼 동작합니다.
• 요소는 문서 흐름에 여전히 포함되어 있습니다.

예제

<!-- Relative Position Example -->
<div style="position: relative; top: 20px; left: 20px;">
  이 요소는 원래 위치에서 상대적으로 20px 아래와 왼쪽으로 이동됩니다.
</div>

<!-- Absolute Position Example -->
<div style="position: absolute; top: 0; right: 0;">
  이 요소는 페이지의 오른쪽 상단에 배치됩니다.
</div>

<!-- Fixed Position Example -->
<div style="position: fixed; bottom: 10px; left: 10px;">
  이 요소는 뷰포트의 왼쪽 하단에 고정됩니다.
</div>

<!-- Sticky Position Example -->
<div style="position: sticky; top: 10px;">
  이 요소는 사용자가 스크롤할 때 상단 10px 위치에서 고정됩니다.
</div>

CSS Position 속성 심화 이해

CSS의 position 속성은 웹 페이지 내 요소의 배치를 정의하는 데 매우 중요한 도구입니다. 기본적인 static, relative, absolute, fixed, sticky 값 외에도, 이 속성을 사용하여 더욱 복잡하고 동적인 레이아웃을 설계하는 방법을 살펴봅시다.

Z-Index와의 관계

position이 static이 아닌 요소에는 z-index 속성을 적용할 수 있습니다. z-index는 요소의 쌓임 순서를 결정하며, 더 높은 값이 상위 레이어를 차지하게 됩니다.

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}

Overflow와 Position

position: absolute 또는 position: fixed로 설정된 요소는 부모 요소의 크기가 충분하지 않을 경우, overflow 속성에 따라 다르게 표시될 수 있습니다.

.container {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden; /* 넘치는 부분을 잘라냄 */
}

.sidebar {
    position: absolute;
    top: 0;
    left: 100%;
    width: 200px;
}

실용적인 팁: 결합사용

position 속성은 종종 다른 레이아웃 속성과 결합하여 사용됩니다. 예를 들어, flexbox와 함께 사용하면 더 유연한 레이아웃을 설계할 수 있습니다

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.centered-content {
    position: relative;
    width: 50%;
    border: 2px solid black;
}

다음시간에 계속…