[CSS] position

글의 인라인이나 블록의 흐름에서 벗어나 요소를 자유롭게 배치할 때 쓰는 속성이다.

속성	적용		기존 자리
static (default)	기본 글의 흐름을 따른다.		차지
relative	기본 글의 공간에서 움직인다.		차지
absolute	상위 태그 중 가장 가까운 포지셔닝이 된 부모 태그 기준으로 한다.		차지하지 않음
fixed	브라우저 기준 화면이 고정된다.		차지하지 않음
sticky	움직이다가 맞닿으면 고정된다.		차지

relative

position:relative;는 다음과 같이 원래 노란색이 있던 자리를 남겨두고 노란색을 움직인다.

 

position:absolute;는 부모 태그 중 position이 적용된 요소를 기준으로 따라간다.

position:fixed;는 항상 고정된 위치에 존재한다. 유튜브 검색창처럼 스크롤을 내려도 항상 동일한 위치를 유지한다.

position:sticky;는 자리를 차지하다가 스크롤을 내려 지정된 위치에 오면 fixed처럼 작동한다. 구글 검색창처럼 처음에는 위치에 있다가 스크롤을 내리면 항상 동일한 위치를 유지한다.

 

position의 위치를 정하는 법

left(왼쪽), right(오른쪽), top(위쪽), bottom(아래쪽), inset(사방이 값이 같을 경우)

마이너스 값을 입력가능하다.

 

z-index

앞 뒤 순서를 정할 때 쓴다. z-index:0;이 default이고 값이 높을 수록 위쪽에 배치된다.