[개념정리] CSS Position

static

-디폴트

 

relative

- 현재위치에서 상대적인 offset, 기준(0.0)은 주변 element의 static 요소

- a,b element가 존재하는 화면에서 a가 left:100px이고 b의 relative가 left: 100px 라면 실제 화면에서 b는 left: 200px의 위치로 계산됨

- relative로 정해진 element는 다른 요소에 영향을 주지 않는다

 

absolute

- 현재위치에서 상대적인 offset, 그러나 기존의 element와 별개이며 부모요소에 dependent한 기준(0.0)을 갖게 된다.

- 부모가 모두 static이거나 부모가 없다면 기준(0.0)이 브라우저가 된다.

- 부모가 하날도 static이 아니라면 부모의 위치가 기준이 된다.

 

fixed 

- 현재위치에서 상대적인 offset, 무조건 브라우저를 기준(0.0)으로 설정된다

- position을 fixed 로 설정하고 top:10을 주면, 브라우저를 기준(0.0)으로 top:10의 위치에 렌더링된다.