Position

문서상의 요소를 배치할 때 사용한다.

Position사용법

1.기준점을 잡는다(relative,absolute....)
2.위치를 이동시킨다(top,left..)

Position속성

• position:static(기본값)인 경우 z-index는 실행되지 않는다

Relative

자기 자신의 원래 위치를 기준으로 배치한다.
위치를 이동하면서 다른 요소에는 영향을 주지 않는다.

Absolute

가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.

• position:absolute로 지정해줄 경우 가로 너비가 최대한 줄어드려는 속성이 있어 너비를 최대한 이용하기 위해서는width:100%를 따로 입력해주어야 한다

children의 경우 부모요소인 parent의 position의 속성을 가지고 있기 때문에,
부모요소기준으로 배치가 되었다. 반면 #absolute는 부모요소에 posittion속성이 없기 때문에 body기준으로 배치되었다.

fixed

뷰포트를 기준으로 배치한다.

• position:fixed로 지정해줄 경우 가로 너비가 최대한 줄어드려는 속성이 있어 너비를 최대한 이용하기 위해서는width:100%를 따로 입력해주어야 한다

스크롤을 내려도 #fixed는 화면에 붙어있다.

sticky

스크롤을 계속해서 따라오도록 배치한다.

스크롤하지 않을 때는 static position처럼 동작하다가 스크롤할 때는 fixed position처럼 작동한다.