Position

페이지에서 태그를 배치할 때 쓰는 속성

static

• 내가 굳이 지정하지 않아도 지정되어 있는 값

p { position: static; }

relative

• 혼자만 쓰일 경우, static 과 별 다를바가 없다.
• relative은 대신에 자신이 기준점이 되어 top, left, bottom, right 사용가능
• 자식에서 absolute가 쓰이면 relative가 부모역할을 하면서 기준점이 된다.

p { position: relative; }

fixed

• 기준점과 상관없이 브라우저의 뷰포인트를 기준점으로 하여 위치를 이동시킬 수 있으며, 항상 맨 앞에 위치하고 있어서 주로 header나 nav에 많이 쓰인다.
• fixed 선언시, block 요소도 inline과 같이 크기가 컨텐츠에 맞게 변환됨으로 width,height 재선언이 필요하다.
• 모바일에서 고정 엘리먼트 지원이 불안정하다.

p { position: fixed; }

absolute

• relative를 부모 삼아서 자식으로써 top, left, right, bottom이 움직일 수 있다.