[TIL] CSS 레이아웃 position속성

Position의 속성

div, ul, form, table, p 요소와 같은 블록 요소의 세부적인 위치를 지정해주는 속성이다.
position 속성에 static, absolut, relative, fixed 값을 이용하요 위치를 지정해준다.

position

 static : position 속성의 기본값으로 요소들을 겹치게 않게 한다.
 
 absolute : 절대값을 지정한다. 브라우져의 왼쪽 상단이 기준접이 되어 top, left 속성값을 이용하여 가로와 위치를 조정한다.
 
 relative : 상대값을 지정한다.
            현재 삽입된 위치를 기준으로 하여 top, bottom, left,
            right 속성 값을 이용하여 가로와 세로 위치를 지정한다.
 
 fixed : 고정값을 지정한다.
         스크롤바를 움직여도 현재 위치를 유지한다.
         브라우저의 왼쪽 상단이 기준점이 되어 top, left 속성 값을 이용하여 
         가로와 세로위치를 지정한다.
            ex) 상단에 고정할 뗴
            	position: fixed;
                top : 0px;
                left : 0px;

position 속성에 absolute값과 fixed 값은 브라우져 왼쪽상단이 기준점이 되고 relative 값은 현재 위치가 기준점이 된다.

자식요소가 position: absolute; 일떄
부모요소가 position: relative; 로 지정될 경우 좌표의 기준점이 되고
position: relative; 로 지정되지 않은 경우 브라우져 왼쪽상단이 기준점이 되어 가로,세로 위치를 지정한다.