개요
css에서, 우리는 어떤 태그에 position이라는 속성을 부여할 수 있다.
이 속성은 static, relative, absolute, sticky의 네 가지 값을 가질 수 있고, 각각 다른 기준으로 요소들을 배치한다. position속성으로 각 요소가 배치될 때의 기준을 지정하고, top, end, left, right, inset의 속성에 값을 지정함으로써 요소의 최종 위치를 결정할 수 있다.
position의 네 가지 값
-
static
position이 갖는 기본 값이다.position에 아무 값도 지정하지 않았을 때 요소는static방식으로 배치된 것이다. -
relative+ 위치지정 (top,end,left,right,inset)
position이relative일 때 요소는 요소가static인 위치를 기준으로 배치된다. -
absolute+ 위치지정 (top,end,left,right,inset)
position이absolute일 때 요소는 위치가 지정된 가장 가까운 상위요소를 기준으로 배치된다. 주로 부모요소에position: relative를 부여하여 부모요소를 기준으로 삼는 방식을 사용한다. -
fixed+ 위치지정 (top,end,left,right,inset)
position이fixed일 때 요소는 웹브라우저 창을 기준으로 배치된다. 주로 웹브라우저의 최상단이나 하단에 고정해둘 요소에 부여한다. 예시로는 nav 요소, 하단 배너 등이 있다. 이 값이 할당된 요소는 문서흐름에서 완전히 벗어난다. 웹브라우저 창의 어떤 위치에 고정된 요소를 생성할 때 사용할 수 있다. -
sticky+ 위치지정 (top,end,left,right,inset)
position이sticky일 때 요소는 웹브라우저 창을 기준으로 배치된다.sticky로도 웹브라우저의 최상단이나 하단에 요소를 고정해둘 수 있다. 상기한fixed와 다른 점은 위치 지정을 통해 어떤 요소가 고정될 조건을 생성해줄 수 있다는 것이다. nav 바 위에 어떤 배너가 있고, 스크롤해 이 배너를 모두 내리면 그 때부터 nav 바를 상단에 고정하는 기능을 구현하려고 한다.fixed로 구현한다면 nav바는 사용자가 스크롤을 내리기 이전부터 최상단에 고정되어 있을 것이다. 이럴 때sticky를 사용할 수 있다.
