CSS POSITION

고먐미·2023년 3월 30일
0

Position이란?
HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.
요소의 정확한 위치 지정을 위해 top, left, bottom, right 속성과 함께 사용되기도 합니다.

position 의 속성들

  • static
    요소를 일반적인 문서 흐름에 따라 배치합니다.
    요소에 position 값을 따로 주지 않았다면 기본값으로 static 속성이 들어갑니다.
    top, left, bottom, right, z-index 속성이 영향을 끼치지 않습니다.

  • relative
    요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로(상대적으로) top, right, bottom, left의 값에 따라 위치를 적용합니다.
    다른 요소에는 영향을 주지 않기 때문에 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

  • absolute
    요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
    가장 가까운 부모 요소를 기준으로 배치합니다.
    만약 부모요소가 없을 시, body 요소를 기준으로 삼습니다.
    top, left, right, bottom 속성으로 위치를 조정할 수 있습니다.

  • fixed
    요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
    요소를 뷰포트 기준으로 고정해 배치하며, 최종 위치는 top, left, right, bottom 값으로 지정합니다.
    보통 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 구현할때 사용합니다.

  • sticky
    요소를 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 부모 요소를 기준으로 배치합니다.
    스크롤이 해당 요소의 위치에 도달하면 요소가 고정됩니다.
    top, left, right, bottom 속성으로 위치를 조정할 수 있습니다.

profile
개념을 이해하고 다른사람에게도 알려줄 수 있는 개발자가 되고 싶어요..

0개의 댓글

Powered by GraphCDN, the GraphQL CDN