[css] position 값

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

static

요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다.

relative

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, table-row, table-column, table-cell, table-caption 요소에 적용했을 때의 작동 방식은 정의되지 않았습니다.

absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.

z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않습니다.

fixed

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (perspective와 filter의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 top, right, bottom, left 값이 지정합니다.

이 값은 항상 새로운 쌓임 맥락을 생성합니다. 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력됩니다.

sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.

이 값은 항상 새로운 쌓임 맥락을 생성합니다. 끈끈한 요소는 "스크롤 동작"(overflow가 hidden, scroll, auto 혹은 overlay)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "끈끈한" 동작을 보이지 않는 점에 주의하세요. (W3C CSSWG의 Github 이슈 참조)

---

`position: relative;`를 사용하는 이유는 요소의 위치를 조정하거나, 이 요소에 `position: absolute;`나 `position: fixed;`로 설정된 자식 요소들의 위치 기준점으로 활용하기 위함입니다. 여기서 `.card` 클래스에 `position: relative;`를 적용한 주된 목적은 몇 가지가 있습니다:

1. 자식 요소의 기준점 설정: 만약 .card 내부에 position: absolute;로 설정된 요소가 있다면, 이러한 요소들은 .card 요소를 기준으로 위치가 결정됩니다. 예를 들어, 팝업이나 드롭다운 메뉴 같은 컴포넌트를 .card 내부에 배치할 때 유용합니다.
2. Z-index 적용: position: relative;는 z-index 속성을 적용할 수 있게 합니다. 이를 통해 다른 요소들과의 쌓임 순서를 조절할 수 있습니다. 예를 들어, 여러 요소가 겹쳐질 때 어느 요소가 상위에 위치할지 결정하는 데 필요합니다. backdrop에 position: fixed;와 함께 높은 z-index 값을 주어 배경으로 사용하고, .card가 그 위에 올라올 수 있도록 하기 위해 z-index를 .card에도 명시적으로 지정할 필요가 있습니다.
3. 세밀한 위치 조정: position: relative;를 사용하면 top, right, bottom, left 속성을 사용하여 요소의 위치를 세밀하게 조정할 수 있습니다. 이는 요소의 원래 위치에서 조금씩 이동시키고자 할 때 유용합니다. 예를 들어, 요소를 약간 우측으로 이동시키거나, 위로 조금 올리고 싶을 때 사용할 수 있습니다.

이러한 이유들로, `.card`에 `position: relative;`를 적용함으로써 더 많은 스타일링 제어와 자식 요소에 대한 위치 정의 기능을 활용할 수 있습니다. 이는 복잡한 레이아웃을 구성할 때 특히 중요하며, 웹 페이지에서 요소들의 시각적 표현과 상호작용을 효과적으로 관리할 수 있게 돕습니다.