Position

속성 position

요소의 위치 지정 방법의 유형(기준)을 설정

• static : 유형(기준) 없음 '기본값
• relative : 요소 자신을 기준으로 배치
• absolute : 위치 상 부모 요소를 기준으로 배치
• fixed : 뷰포트를 기준으로 배치
• sticky : 스크롤 영역 기준으로 배치

위치 상 부모 요소란 position속성이 들어가 있는 부모요소를 말한다.
position속성이 할당된 부모속성이 없다면 최상위 부모요소인 뷰포트기준으로 배치하게 된다.

relative는 배치가 되더라도 이전에 배치 되어있던 공간을 차지함
absolute는 부모 요소기준으로 float된것 같이 배치가 가능하다.

속성 top, bottom, left, right

요소의 position 기준에 맞는 "??"에서의 거리(위치)를 설정
px,em,cm
% 단위 - 음수값 허용

요소 쌓임 순서(stack order)

요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(Z축)

• static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)
• position이 모두 존재한다면 z-index속성의 숫자 값이 높을 수록 위에 쌓임
• Position속성의 값이 있고, z-index속성의 숫자 값이 같다면,
  'html'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드)

display 수정

absolute, fixed 속성 값이 적용된 요소는 display속성 값이 대부분 block으로 수정됨