[CSS] position에 대해서

CSS에서 position이란, element를 배치하는 속성을 말한다.

옵션으로는 static, relative, absolute, fixed, sticky 5가지가 있다.

1. static (기본값)

static은 HTML의 일반적인 흐름을 따라 배치되며,

position을 따로 지정하지 않았을 때 기본적으로 적용된다.

top, right, bottom, left, z-index 속성들에 영향을 받지 않는다.

2. relative

relative는 static과 마찬가지로 HTML의 일반적인 흐름에 따라 배치된다.

대신, top, right, bottom, left와 같은 속성에 의해 상대적인 (relative) 위치에 배치된다.

positon을 relative로 지정해도, 위의 속성들을 지정해주지 않으면 static과 같은 배치를 갖는다.

3. absolute

absolute의 위의 속성들과 달리 HTML의 일반적인 흐름을 따르지 않고, 가장 가까운 위치의 조상 element에 상대적인 위치로 배치된다.

조상 element가 없다면 body를 기준으로 삼고 페이지 스크롤에 따라 움직인다.

4. fixed

absolute와 마찬가지로 HTML의 일반적인 흐름을 따르지 않고, 스크린의 viewport를 기준으로 배치된다.

즉, 스크롤되어도 움직이지 않는 (fixed) 고정된 위치를 갖는다.

5. sticky

sitcky는 HTML의 일반적인 흐름에 따라 배치된다.

top, right, bottom, left 속성들의 값을 기준으로 flow root 및 해당 element를 포함하는 containing block에 대한 상대적인 위치에 배치된다.

때문에 relative와 마찬가지로 위의 속성들을 지정해주지 않으면 static과 같은 배치를 가지며, 다른 요소들에 영향을 주지 않는다.

fixed는 요소들이 겹치는 상황이 올 수 있지만, sticky는 그런 상황을 예방한다.