position

position

 

웹사이트중 퀵메뉴, 즉 스크롤에 따라다니는 메뉴바 형태에서 position을 이용해 위치를 고정시키고 자바스크립트를 이용해

스크롤을 따라다니는 모양으로 만들어준다.

 

속성값 : absolute, relative, fixed, static, inherit

위치 설정 : top, left, bottom, right

ex) {position:absolute;left:10px;top:20px;}

 

absolute 절대위치

relative 상대위치

fixed 위치고정

inherit 부모의 속성이 상속됨

static 포지션의 기본값으로 위치 설정

 

relative

현재위치에서 상대적인 위치에 이동

 

absolute

 

 

absolute일때는 두가지 형태로 나뉨.

상위 element속성이 relative인것과 아닌것으로 나뉘는데

아닐경우 브라우저인 body기준으로 절대위치를 가지고, 상위 속성이 relative이면 해당 속성을 기준으로 이동된다.

 

fixed

 

그림을 보면 스크롤이 되었음에도 자신의 위치에서 이동이 없다.

fixed의 기준은 바로 브라우저 body이다. 스크롤로 이동하여도 이동하지 않게된다.

 

그림 출처 : http://webuit.tistory.com/240