CSS position static/relative/absolute/fixed 정리

페이지의 어떤 레이아웃을 배치하기 위해 position속성을 사용하는데 

position속성은 기본값 (default)로 static을 갖는다.

 

static은 요소를 문서의 흐름에 따라 배치한다.

이때, top,bottom,left,right,z-index속성이 요소에 아무런 영향을 주지 않는다.

 

relative는 요소를 일반적인 문서 흐름에 따라 배치하고, 자기자신을 기준으로 오프셋 값을 정한다

(top,bottom,left,right)모두 자기자신을 기준으로 정해짐

 

absolute와 fixed는  부모 요소에 구애받지 않고 ,요소를 자유롭게 배치할 떄 사용된다.

---

absolute VS fixed

left,right,top,bottom각각 값은 특정한 기준으로부터 얼마나 떨어져있느냐를 정하는데 (양수일 수록 멀리 떨어짐)

absolute와 fixed는 이 특정한 기준이 달라진다

 

absolute의 기준

absoulte의 기준이 되는 위치는 가장 가까운 부모요소이면서 position이 relative인 요소가 된다.

만약 가까운 부모요소가 position이 relative인 요소가 없다면 body태그가 기준이 된다.

 

fixed의 기준

position이 fixed라면 브라우저 창이 기준이 되어서 offset값이 정해진다