1. position 

position은 HTML 요소의 위치(배치)를 결정하는 방식을 설정하는 태그이다.

좌표를 가지고 어떻게 배치할지를 결정을 한다.

좌표의 기준은 부모 요소의 좌측상단 모서리가 0,0으로 간주된다.

좌표 설정은 top, right, left, bottom 태그를 이용한다. 각각의 태그는 얼마나 떨어져있는지, 여백을 결정하는 것이다. 

 

top 부모 요소의 위로부터의 여백
right 부모 요소의 오른쪽으로부터의 여백
bottom 부모 요소의 아래로부터의 여백
left 부모요소의 왼쪽으로부터의 여백

 

 

 

2. position 속성

1. static

기본 위치값 / top, right, bottom, left 배치 속성값에 영향을 받지 않는다. HTML 문서 상에서 원래 있어야하는 위치에 배치된다.

 

2. relative

원래 출력되어야 할 기본 위치(static)를 기준으로 위치를 설정하는 방식이다. 원래 출력되야하는 곳 기준으로 위치가 잡힌다.

 

3. absolute

부모 요소 기준으로 위치를 설정하는 방식으로 배치 기준을 자신이 아닌 상위 요소에서 찾는다.  

position: static 속성을 가지고 있지 않은 조상을 기준으로 한다. 부모요소 모두 position 속성이 없는 경우에는 <body> 기준이 된다.

 

4. fixed

뷰포트(viewport)를 기준으로 위치를 설정하는 방식으로 웹브라우저 전체 화면이 기준이 된다.

웹 페이지가 스크롤 되어도 fixed로 지정된 요소의 위치가 변하지 않는다.

 

 

  static relative absolute fixed
기준 기본 위치 (배치속성 영향x) 원래 출력되어야 할 기본 위치 부모 요소 뷰포트 (웹브라우저)