position의 속성 종류
1. static
position : static // 기본 default 값으로 사용되어지진 않는다.
static의 경우 기본값으로 설정하여도 위치 값 설정이 무시된다.
2. relative
position: relative // relative 설정시
right: xx // (left, right, bottom, top,)으로 기존 위치에서 이동 시킬 수 있다.
3. absolute
position: absolute
absolute의 경우 상위 요소 중 static이 아닌 첫번째 요소를 기준으로 좌표
값 만큼 이동하게된다.
주의할 점으로는 부모, 혹은 그 위 요소 모두 static인 경우 body를 기준으로 이동하게됨.
사용 할 시엔 부모, 조상 요소를 미리 확인. 부모가 기준이 되어야 한다면
부모 요소에 relative를 설정하여야 사용 가능하다.
4. fixed
position: fixed // 부모와 관계없이 브라우저의 viewport 값을 기준으로 이동.
fixed는 스크롤이 되어도 요소가 항상 화면 같은 곳에 고정.
netflix 상단 바 등 여러 웹페이지에서 사용중님 property이며
fixed 일때 block 요소의 width는 inline 요소처럼 content의 크기에 맞춰
줄어듭니다.
5. sticky
position: sticky
sticky의 경우 평소엔 static이지만 특정 스크롤 지점에 도달시
fixed 처럼 변하게 됨.
