CSS Position

Rookie·2022년 2월 26일
0

Position 속성

Static - 기준없음 (배치불가능/ 기본값)
Relative - 요소 자기 자신을 기준으로 배치
Absolute - 부모(조상) 요소를 기준으로 배치
Fixed - 뷰포트 기준으로 배치
Stickey - 스크롤 영역 기준으로 배치


Relative

요소를 일반적인 문서 흐름에 따라 배치한다.
요소를 자기 자신의 원래 위치 (static일 때의 위치)를 기준으로 배치한다.

  • 원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
  • 위치를 이동하면서 다른 요소에 영향을 주지 않는다.
  • 문서 상 원래 위치가 그대로 유지된다.

Abosolute

요소를 일반적인 문서 흐름에서 제거한다.
가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.

  • 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
  • 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(요소)를 기준으로 삼는다. (static을 제외한 값)
  • 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다.)
profile
노력형 잡캐입니다

0개의 댓글

관련 채용 정보