Position

- Static, Absolute, Relative, Fixed, Sticky가 있음

- (1) position: static;

• default 값
  

- (2) position: relative;

• 요소를 자신의 원래 위치를 기준으로 이동
• position: relative;
left/right/top/bottom: 3px;
• 요소 자신의 원래 위치 기준으로 %로 이동하고 싶을 경우, 아래 두 가지 방법으로 구현 가능
  i. transform: translate(50%) 사용
  ii. 부모 요소에 width를 fit-content;로 설정 후, position: relative로는 구현
  
  

- (3) position: absolute

• position: absolute;
left/right/top/bottom: 3px
  -** 가장 가까운 position이 적용된 조상요소를 기준으로 위치 결정
• position이 적용된 조상요소가 없다면, body가 기준이 됨**
• 문서이 흐름에서 사라짐(예시: box 1,2,3이 있는데 box 2에 position: absolute;를 적용한다면, box 2 자리에 box 이 가게 됨)

- (4) position: fixed

• 뷰포트를 기준으로 고정
• (vs position:sticky: 페이지를 스크롤해도 항상 화면에 고정)
• 속성값 fixed 사용 주의사항
  (1) 가로길이 100%가 해제 되므로, width: 100%와 함께 사용할 것
  (2) 아래로 화면 스크롤해도 가장 상위에 표시되도록, z-index: 사용할 것
  
  

- (5) `position: sticky

• 원래 위치에 위치해 있다가, 스크롤을 내릴 때 특정 위치(임계점)에 도달하면 요소가 화면에 고정되고, 그 이후 스크롤을 더 내리면 고정된 상태로 계속 유지되는 속성
  
  
  

- (6) z-index

• 용도 : 레이어링 우선순위 설정
• 자기 요소에 position이 설정된 경우에만 사용 가능
• 기본 값 : 0
• 숫자가 클수록 가중값 높음

연습문제

• https://antitifragile.notion.site/6-df0bef73eecc4c42a1044831247e5122 > 실습 3.~
• 답 : 2-4 포지셔닝 파일 > 연습문제1~3번