position

position 속성은 HTML 요소가 위치를 결정하는 방식을 설정한다.

position

정적 위치(static position)

top, right, bottom, left 속성값에 영향을 받지 않는다. 위치가 없는 것과 동일하며 기본 설정값이다.

position : static;

상대 위치(relative position)

해당 요소의 기본 위치를 기준으로 위치를 설정하는 방식이다.

position : relative;

고정 위치(fixed position)

뷰포트를 기준으로 위치를 설정하는 방식이다. 이를 설정하면 display 속성이 자동으로 block이 된다.

position : fixed;

절대 위치(absolute position)

부모나 조상 요소를 기준으로 위치를 설정하는 방식으로 부모나 조부모 요소의 위치가 정적 위치일 경우 뷰포트를 기준으로 한다. 따라서 부모나 조부모의 위치를 기준으로 하려면 부모나 조부모의 위치를 상대 위치로 지정하는 것이 바람직하며 설정하면 display 속성이 자동으로 block이 된다.

position : absolute;

스티키 위치(sticky position)

사용자의 스크롤 위치를 기준으로 배치된다. position : fixed는 항상 화면에 고정이 되는 요소를 만들 때 사용하는 반면 position : sticky는 스크롤이 되어서 이 요소가 화면에 나오면 고정시킨다. 스크롤을 하기 위한 부모 박스가 있어야하고 top 등 좌표속성과 함께 써야 제대로 작동된다.

position: sticky;

유동 배치(float)

항상 같은 위치에 고정되어 출력된다.

float : right;

clear속성은 다른 요소의 방향을 제어한다. float요소 옆에 있는 요소에 어떤 일이 발생하는지 알려준다.

요소 쌓임 순서

1. 요소에 position 속성 값이 있는 경우 더 위에 쌓인다.
   1-1. postion: static;이면 아무리 숫자가 높아도 없는 것과 마찬가지이다.
2. 1번이 같을 경우 z-index 속성의 숫자 값이 높을 수록 위에 쌓인다.