position

Sshu Sshu·2021년 5월 22일
0

css

목록 보기
1/1

문서 상에 요소를 배치하는 방법
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정

static

  • 기본값으로 요소를 일반적인 문서 흐름에 따라 배치
  • top, right, bottom, left X
  • 공간 O
  • z-index X

relative

  • 요소를 일반적인 문서 흐름에 따라 배치
  • 자기 자신을 기준으로 top, right, bottom, left O
  • 공간 O
  • z-index O

absolute

  • 요소를 일반적인 문서 흐름에서 제거
  • top, right, bottom, left O
  • 조상 요소에 상대적 배치
  • z-index O
  • 공간 X

fixed

  • 요소를 일반적인 문서 흐름에서 제거
  • 공간 X
  • 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치
    요소의 조상 중 하나가 transform, perspective, filter 속성
    none이 아니면 그 조상을 컨테이닝 블록으로 삼습니다.
  • top, right, bottom, left O
  • 항상 새로운 쌓임 맥락을 생성

sticky

  • 요소를 일반적인 문서 흐름에 따라 배치
  • 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
  • 항상 새로운 쌓임 맥락을 생성
  • overflow가 hidden, scroll, auto 혹은 overlay이 존재하는 가장 가까운 조상
profile
Front-End Developer

0개의 댓글