[CSS] position

Position

CSS의 position 속성은 문서 상에서 element를 배치하는 방법을 지정하는 속성이다.

static

position 속성을 지정해주지 않으면 기본값으로 static이 적용된다. static은 element가 문서 상에서 원래 있어야 하는 위치에 배치된다. 즉, element가 위에서 아래로 순서대로 배치된다. 

 

추가로 static일 때 top, bottom, left, right 속성을 무시한다.

relative

relative 속성은 element를 원래의 위치에서 상대적인 위치를 가질 수 있도록 한다. 즉, top, bottom, left, right 속성을 부여해서 상대적인 위치를 지정할 수 있다. 여기서 원래 위치라는 것은 static일 때의 위치를 얘기한다.

 

relative의 다른 특징으로는 element를 움직여도 원래 있던 자리가 빈 공간으로 유지되어서 다른 element가 배치될 수 없다.

absolute

가장 가까운 positioned 조상 element를 기준으로 상대적인 위치를 가질 수 있도록 한다. 여기서 positioned 조상 element라는 것은 position이 static 이외의 값인 조상 element를 얘기한다. 만약 positioned 조상 element가 없다면 body를 기준으로 한다.

 

원래 있던 자리에 빈 공간이 생기지 않는다. 다음 element가 해당 위치에 배치된다.

fixed

브라우저 화면 (viewport)를 기준으로 위치를 잡는다. 다른 말로, 스크롤로 화면을 이동시켜도 해당 element는 화면에 고정되어서 움직이지 않는다.

 

원래 있던 자리에 빈 공간이 생기지 않는다. 다음 element가 해당 위치에 배치된다.