Position 속성

1. static

• 기본 값: 모든 HTML 요소는 기본적으로 position: static으로 설정됩니다.

• 기준 위치: 요소는 문서의 일반적인 흐름에 따라 배치됩니다.

• 좌표 속성: top, right, bottom, left와 같은 위치 지정 속성은 무시됩니다.

• 사용 예: 별도로 위치를 지정할 필요가 없는 경우에 사용되며, 대부분의 경우 기본 상태로 사용됩니다.

.box {
    position: static; /* 기본값으로, 특별히 지정하지 않아도 적용됨 */
}

2. relative

• 기준 위치: 요소는 원래 자신의 위치에 배치됩니다. 이후 top, right, bottom, left 속성을 사용하여 이 위치에서 상대적으로 이동할 수 있습니다.

• 문서 흐름: 요소는 여전히 문서 흐름에서 공간을 차지하며, 다른 요소들의 배치에 영향을 미칩니다.

• 사용 예: 요소를 원래 위치에서 약간 이동시키거나, absolute로 배치된 자식 요소의 기준 위치로 사용됩니다.

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

3. absolute

• 기준 위치: 요소는 문서 흐름에서 제거되며, 가장 가까운 relative, absolute, fixed, 또는 sticky로 설정된 조상 요소를 기준으로 위치가 결정됩니다. 그런 조상 요소가 없다면 뷰포트(브라우저 창)를 기준으로 합니다.

• 문서 흐름: 요소는 문서 흐름에서 제거되므로 다른 요소에 영향을 주지 않고, 다른 요소들도 이 요소가 차지하던 공간을 채우게 됩니다.

• 사용 예: 요소를 특정 위치에 고정하거나, 중첩된 레이아웃을 만들 때 사용됩니다.

.container {
    position: relative;
}

.box {
    position: absolute;
    top: 10px; /* 컨테이너의 위쪽에서 10px 떨어진 위치 */
    left: 20px; /* 컨테이너의 왼쪽에서 20px 떨어진 위치 */
}

4. fixed

• 기준 위치: 요소는 뷰포트를 기준으로 고정됩니다. 스크롤을 하더라도 요소는 항상 같은 위치에 남아 있습니다.

• 문서 흐름: absolute와 마찬가지로 문서 흐름에서 제거됩니다.

• 사용 예: 페이지의 상단 또는 하단에 고정된 네비게이션 바, 상단 배너 등을 구현할 때 사용됩니다.

.header {
    position: fixed;
    top: 0; /* 뷰포트의 맨 위에 고정 */
    width: 100%;
}