CSS의 position 속성이란?

w3school의 position 예제파일

CSS의 position 속성이란, div나 각종 요소들의 포지션, 즉 위치를 지정하는 속성이다.

총 다섯가지의 속성을 가지고 있는데 해당요소를 A, 감싸고있는 테두리를 B로 볼때

static / 기본 position, 위치설정이 적용되지 않는다.

absolute / 전체 페이지를 기준으로 A의 위치가 지정된다.

fixed / 전체 페이지를 기준으로 지정되며, 스크롤이 내려가도 그 위치에 고정된다.

relative / B를 기준으로 A의 위치가 지정된다.

inherit / 부모창을 기준으로 A의 위치가 지정된다.

으로 이루어져 있다.

여기서 inherit 는 좀 특이한 경우로, 팝업창에 적용되는 position이다.

부모요소의 position을 그대로 상속받아 자식창에 적용시킨다.

사용은 position:[속성]; 으로 위의 예제와 같이 한다.

나의 블로그를 예로 들어본다면

static은 글에 포함된 이미지이며

absolute는 고정되있는 리본메뉴

fixed는 스크롤을 따라오는 하단 검색 및 페이지바

relative는 ...없구나

position 속성은 흔히 float 속성이나 z-index 속성과 같이 쓴다.