[CSS] position

positon

positon이란

• 요소의 위치를 조정하는 데 사용되는 속성이다.
• 다양한 값을 가지며, 요소를 원하는 위치에 배치하고 레이아웃을 제어하는 데 도움을 준다.

종류

static

• 기본값이며, 일반적인 요소의 배치 방식이다.
• position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.
• top, right, bottom, left, z-index 등의 속성은 static인 요소에 적용되지 않는다.

relative

• 요소를 일반적인 문서 흐름에 따라 배치한 후, top, right, bottom, left 속성을 이용해 상대적인 위치를 지정할 수 있다.
• 다른 요소에 영향을 주지 않고 자신의 위치를 조정합니다.

absolute

• 요소를 가장 가까운 위치 지정 조상 요소에 상대적으로 배치한다.
• 대부분의 경우, 부모 요소(가장 가까운 상위 요소)를 기준으로 top, left, bottom, right 속성을 적용한다.
• 어떤 요소의 display 속성을 absolute로 설정하면, 부모 요소의 display 속성을 relative로 지정해주는 것이 관례이다.
• 위치 지정 조상 요소가 없다면, 문서의 초기 컨테이너(일반적으로 body)를 기준으로 위치가 결정된다.
• top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있다.

fixed

• 요소를 뷰포트(브라우저 창)를 기준으로 고정된 위치에 배치한다.
• 스크롤해도 요소는 항상 같은 위치에 남아 있다.
• top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있다.

sticky

• 요소를 스크롤되는 영역 내에서 상대적인 위치에 고정한다.
• 스크롤이 일정 위치에 도달하면 고정 위치에서 벗어나며, 다시 스크롤이 원래 위치로 돌아오면 고정 위치로 돌아간다.
• top, right, bottom, left 속성을 사용하여 고정 위치를 지정할 수 있다.