CSS position

속성 값

static : 유형이 없음 배치 불가능(기본값)
relative : 요소의 자신을 기준으로 배치
absolute : 위치 상 부모요소를 기준으로 배치
fixed : 브라우저를 기준으로 배치
sticky : 스크롤 영역 기준으로 배치

top / bottom
요소의 기준에 맞는 위쪽/아래쪽에서의 거리(위치)를 설정
auto : 브라우저가 계산
단위 : px, em , cm 등 단위로 지정
% : 부모여서의 세로 너비의 비율로 지정 음수 값 허용

left / right
요소의 기준에 맞는 위쪽/아래쪽에서의 거리(위치)를 설정
auto : 브라우저가 계산
단위 : px, em , cm 등 단위로 지정
% : 부모여서의 가로 너비의 비율로 지정 음수 값 허용

relative는 주변 형제요소에 영향을 준다
그래서 가급적 absolute, fixed를 써라

absolute를 사용할때 항상 부모요소에 position : relative를 해줘야 한다

sticky를 사용할때는 top이나 right를 0으로 설정해야함

요소 쌓임 순서(stack order)

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

1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)
2. position이 모두 존재한다면 z-index속성의 숫자 값이 높을 수록 위에 쌓임
3. position속성의 값이 있고 z-index속선 값이 같다면 HTML위 마지막 코드일 수록 위에 쌓음(나중에 작성한 코드(요소))
   position > z-index > html마지막코드

position이 있어야 z-index를 사용할수 있다

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