position

• 요소의 위치 지정 기준
• static : 기본값
• top, right, bottom, left의 속성이 같이 설정되어야 한다. 그 속성값은 음수가 될 수도 있다.
• relative : 요소 자신을 기준으로 배치. 요소가 옮겨지더라도 변경 전의 위치는 비어 있다.
• absolute : 위치 상 부모 요소를 기준으로 배치. 주변 요소와의 상호작용이 사라진다. 부모 요소에 relative가 설정되어 있지 않다면 뷰포트(브라우저) 자체가 부모 요소가 된다.
• fixed : 뷰포트(브라우저)를 기준으로 배치. 주변 요소와의 상호작용이 사라진다.

<aside> 💡 position의 값이 absolute, fixed라면 display의 값이 block이 되고 가로 너비를 최소한으로만 사용하려고 한다.

</aside>

요소 쌓임 순서(stack order)

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML 문서에서 나중에 작성된 요소가 위에 쌓임

z-index

• 요소의 쌓임 정도를 지정
• auto : 부모 요소와 동일한 쌓임 정도
• 속성의 값이 높을 수록 위에 쌓임