[CSS] CSS position 정리 (static, absolute, relative, fixed, sticky)

 

 

CSS position

▷ static

- position의 defalut value

- html에서 지정한 순서대로 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다

- top, left, right, bottom 값을 설정해도 변화가 없음

 

▷ absolute

- 내 아이템과 가장 가까이 있는 부모의 box를 기준으로 움직임

- 이때 부모의 position은 static이 아니어야 함

- 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨(static이어도)

 

img {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

.vt {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 100%;
  background-color: white;
}

 

▷ relative

- 원래 있어야 하는 자리에서 지정된 값만큼 이동함

- 기존 static인 상태를 기준으로 주어진 픽셀만큼 움직임

 

▷ fixed

- 페이지를 기준으로 값을 고정

- parent 요소에도 영향을 받지 않음

 

▷ sticky

- 스크롤되어도 이동하지 않고 원래 자리에 붙어있음

 

 

 

 

 

<Reference>

엘리코딩: https://www.youtube.com/watch?v=jWh3IbgMUPI&t=651s