CSS 배치

<요소의 위치 지정 기준>
position
static(기본값) : 기준 없음
relative : 요소 자신을 기준
absolute : 위치 상 부모 요소를 기준
fixed : 뷰포트(브라우저)를 기준
sticky : 스크롤 영역 기준

<요소의 각 방향별 거리 지정>
top, bottom, left, right
auto : 브라우저가 계산
단위 : px, em, rem 등 단위로 지정

position: absolute 는 relative를 찾아서 부모 요소를 찾아간다. 

body태그 까지 못 찾으면 뷰포트 기준으로 위치를 지정한다,

 

<요소 쌓임 순서(Stack order)>
어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임. (기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

 

<요소의 쌓임 정도를 지정>
z-index
auto : 부모 요소와 동일한 쌓임 정도
숫자 : 숫자가 높을 수록 위에 쌓임

요소의 display가 변경됨
position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨.