CSS) Position의 종류

포지션 속성으로 원하는 좌표 기준에 따라 요소를 정렬할 수 있다.

top, right, bottom, left 값에 따라 offset을 적용할 수 있는데, 그 기준이 좌표 기준은 아래와 같다. 

 

속성값	특징
static	(기본값) 특별한 특징 없음
relative	원래 자기 자신의 위치를 좌표 삼아 움직임
absolute	다른 레이아웃과의 관계를 벗어나 고정적인 위치를 갖는다. 자신에게 가장 가까운 포지션 값이 있는 상위 요소를 기준으로 삼게 된다.
fixed	뷰포트(Viewport)를 기준으로 고정값을 가진다. 스크롤이 발생해도 뷰포트에서 고정적인 위치값을 갖는다.
sticky	요소를 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 스크롤이 가능한 조상과 가장 가까운 블록 레벨 조상을 기준으로 top, right, bottom, left 값에 따라 offset을 적용한다.

 

 

absolute를 쓸 때 주의 사항

absolute를 쓸 때, 내가 원했던 위치가 아닌 곳에 기준이 걸릴 때가 있다면 부모 요소의 포지션 값이 static인지 아닌지 확인해보는 것이 좋다.

 

 

z-index와의 관계

z-index를 사용해서 기존 쌓아올림 순서와 다르게 해당 요소를 다른 요소보다 위에 위치하게 바꿀 수 있다. 그러나 z-index를 쓰려면  position값이 static이 아닌 다른 position값을 가지고 있어야 한다.