position 속성

position 속성 - relative, absolute, fixed

Position : 요소의 위치 지정 기준

position과 같이 사용하는 css속성들

Top, bottom, left, right, z-index 등
모두 음수를 사용할 수 있다.
기본값 : static : 기준 없음

• relative : 요소 자신을 기준
• absolute : 위치 상 부모 요소를 기준
  부모요소에 position: relative;를 해줘야함
  안하면 기준이 상위요소로 계속 바뀐다.
  모든 조상요소에 기준이 없으면 뷰포트가 기준이 된다.
• fixed : 뷰포트(브라우저)를 기준
  (sticky : 스크롤 영역 기준)

Top, bottom, left, right : 요소의 각 방향별 거리 지정
기본값 : auto : 브라우저가 계산
단윈 : px, em, rem 등 단위로 지정

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

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

Z-index : 요소의 쌓임 정도를 지정
기본값 : auto : 부모 요소와 동일한 쌓임 정도
숫자를 값으로 사용

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