css-position

<position>

 

 

position: static 

 

ㄴ 기본값, 코드 순서대로 배치됨

 

ㄴ top,bottom,left,right 값들 무시

 

 

 

 

 

position: relative

 

ㄴ 요소가 원래 위치를 기준으로 얼만큼 움직일지 지정

 

ㄴtop,bottom,left,right를 이용하여 원래위치를 기준으로 이동, 겹치기가능

 

 

 

 

 

 

 

position: absolute

 

ㄴ 배치기준이 (자신이아니라) 상위 부모들 중에서 position이 static이 아닌 부모를 기준으로 설정

ㄴ 요소 상위에 position 속성이 static이 아닌 요소가 없으면 DOM트리의 최상위인 body가 배치 기준이된다

ㄴ 그래서 (가장 가까운) 부모를 기준으로  top,bottom,left,right 속성 적용

ㄴ 그래서 대부분 어떤 요소의 position을 absolute로 설정했다면, 그 부모의 position을 relative로 지정해준다

ㄴ * position:absolute인 요소는 html 문서상에서 독립돼서 앞뒤에 나온 요소와 더이상 상호작용하지 않는다

ㄴ 그래서 앞뒤에 나온 요소들이 서로 붙어서 나온다

 

 

 

 

 

 

position: fixed

 

ㄴ 스크롤이 움직여도 화면 특정위치에 요소를 고정

ㄴ즉, 배치기준을 (자신도아니고 부모도아니고) 뷰포트(브라우저 전체화면)을 기준으로 한다

 

ㄴ 위치값을 top, left 등으로 지정해줘야만한다. 꼭