3. css로 요소 배치하기

document flow: 일반적인 HTML 문서의 흐름을 의미합니다.

position: 해당 요소의 위치를 변경하는 데 사용됩니다. (기본값: static)

absolute, relative, fixed, sticky: position 값으로 사용됩니다.

• fixed: 스크롤을 움직여도 항상 화면 상에 고정되어 있는 요소를 만듭니다. 뷰포트(화면)를 기준으로 위치가 설정됩니다.

box-sizing: border-box: 요소의 크기를 경계선까지 포함하여 계산합니다.

z-index: 요소의 쌓임 순서를 지정하는 데 사용됩니다. 높은 값이 낮은 값보다 앞에 위치합니다.

절대적 배치 (absolute): 조상 요소를 기준으로 이동합니다. 부모 요소가 position 속성을 갖고 있지 않으면 HTML이 기준이 됩니다.

상대적 배치 (relative): 현재 위치에서 이동합니다. 요소가 부모 요소를 벗어날 수 있습니다.

overflow: hidden: 부모 요소의 범위를 넘어가는 내용은 보이지 않게 합니다.

sticky: 요소와 뷰포트 사이의 특정 지점에서 고정되는 특성을 갖습니다. 부모 요소의 끝까지 스크롤될 때까지 고정됩니다.

부모 요소의 z-index 값: 자식 요소의 z-index에 영향을 줄 수 있습니다. 이는 스택 컨텍스트를 형성합니다.