아주 쉬운 CSS - position

CSS position에 대해 알아보자!

CSS position

문서 상에 요소를 배치하는 방법

• static
  기본값으로 임의 위치 설정 불가능
  요소를 일반적인 문서 흐름에 따라 배치
  top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다.
  
• relative
  일반적인 문서 흐름에 따라 배치, 원래 있던 위치를 기준으로 위치를 설정한다.
  자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
  오프셋은 다른 요소에는 영향을 주지 않는다.
  페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.
  z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성
  
• absolute
  가장 가까운 위치 지정 조상 요소를 기준으로 배치
  요소를 일반적인 문서 흐름에서 제거
  페이지 레이아웃에 공간도 배정하지 않는다.
  조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다.
  최종 위치는 top, right, bottom, left 값이 지정한다.
  z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성
  절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않는다.
  
• fixed
  뷰포트를 기준으로 배치
  요소를 일반적인 문서 흐름에서 제거
  페이지 레이아웃에 공간도 배정하지 않는 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치
  요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.
  최종 위치는 top, right, bottom, left 값이 지정
  항상 새로운 쌓임 맥락을 생성
  문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력
  
• sticky
  구성에 따라 배치, 스크롤이 존재하는 가장 가까운 조상에 달라 붙는다.
  요소를 일반적인 문서 흐름에 따라 배치
  테이블 관련 요소를 포함해 가장 가까운 스크롤 되는 조상과 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
  오프셋은 다른 요소에는 영향을 주지 않는다.
  항상 새로운 쌓임 맥락을 생성
  stricky는 스크롤 동작(overflow가 hidden, scroll, auto 혹은 overlay)이 존재하는 가장 가까운 조상에 달라붙는다.
  조상이 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 stricky 동작을 보이지 않는다.
  

See the Pen CSS position by Hyejis (@saramnim) on CodePen.

mdn 참조 https://developer.mozilla.org/ko/docs/Web/CSS/position