CSS포지션 (position)

CSS의 position 속성은 문서상에 요소를 배치하는 방법을 지정합니다.

 

 

static :

모든 태그들은 default값이 static이다. 태그들은 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

 

span태그의 사용으로 나란히 배치됨

relative: 

static에서 위치를 살짝 변경하고 싶을 때 사용

top, bottom, left, right 속성을 사용해 위치 조절 가능.

static일 때를 기준으로 태그들이 움직임.

같은 position이면 나중에 나온 태그가 위에 배치된다.

z-index는 겹칠 때 어떤 태그가 위로 올라갈지 정한다.

span1이 static위치에서 아래로 12px이동함

 

absolute:

absolute는 position:static 속성을 가지고 있지 않은 조상을 기준으로 움직임. 

만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없으면 body태그를 조상으로 둔다.

 

fixed:

fixed는 스크롤을 내려도 항상 자리가 고정되어 보인다. 즉 일반적인 문서 흐름에서 제거하고 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.

최종 위치는 top, right, leftm bottom값이 지정

스크롤을 내려도 뷰포트를 기준으로 고정되어있음.

 

 

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/position

https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1