Position

CSS에서 각 요소들의 위치에 관련된 position의 다양한 속성에 대해 알아보겠다.

static

default 값이며 HTML의 작성 순서대로 브라우저에 자연스럽게 보여진다.
이 상태에서 위치를 변경해주는 left,top등을 지정해도 아무런 변화가 없다.

위의 그림을 보면 container와 box에 모두 top과 left로 위치를 이동시켜주었지만, 아무 움직임이 없는 것을 볼 수 있다. 이것은 position에 아무 속성을 주지 않았기 때문에 default값인 static이 적용되었기 때문이다.

relative

relative는 원래 있던 자리를 유지하면서 그 자리에서 상대적으로 우리가 지정한 top과 left만큼 이동한다.

위의 static과 다르게 container와 box에 position을 relative로 속성을 변경했더니 원래 있던 자리에서 상대적으로 각각 움직인 것을 볼 수 있다.

absolute

absolute는 아이템이 담겨있는 가장 가까운 박스를 기준으로 위치가 변경된다.
근접한 부모값 중 static이 아닌 부모요소가 기준이 된다.
박스안에서 원하는 위치의 기준으로 이동하길 원한다면 기준이 될 부모요소의 position을 relative로 변경해준다.

box에 position을 absolute로 지정해 주니 부모요소 container를 기준으로 위치가 이동이 되었다. (이 때, 부모 요소의 position이 relative이어야 그 요소를 기준으로 이동한다.)

fixed

fixed는 박스안에서 완전히 벗어나 윈도우(브라우저)기준으로 위치가 변경된다.

box는 부모요소인 container에서 완전히 벗어나 윈도우 기준으로 위치가 이동되었다.

sticky

sticky는 원래 있던 자리를 유지하되 스크롤 되어도 원래 그 위치에 고정적으로 붙어 위치한다.
네비게이션을 스크롤 하고, 위치를 고정시킬 때 유용할 것 같다!

실제로 스크롤을 했을 때 빨간 박스는 저 자리에 고정적으로 위치해있다.