[CSS] position

position이란?

HTML요소가 배치되는 방식을 결정하는 속성

positioxn의 속성 5가지

static(기본값), relative, absolute, fixed, sticky

top, left, right, bottom : 해당 방향 기준으로 요소의 좌표값을 변경

1. position: static(기본값)
   요소를 문서상 원래 있어야 하는 위치에 배치한다.
   top, left, right, bottom 적용 불가
   
   
2. position: relative
   원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다.
   top, left, right, bottom 적용 가능
   
   
3. position: absolute
   절대 좌표를 기준으로 요소의 위치를 조정할 수 있다.
   top, left, right, bottom 적용 가능
   * 절대 좌표는 해당 요소의 relative가 적용된 부모요소의 좌표거나, 부모요소가 없다면 body태그의 좌표를 기준으로 생성됨
   
   • relative 적용된 부모 요소가 없을 경우
     
   • 부모요소에 relative가 있을경우
     

4. position: fixed
   스크롤과 무관하게 뷰포트를 기준으로 요소의 위치를 설정할 수 있다.
   기준 : viewport
   
   
5. position: sticky
   요소의 원래 위치에 있다가 스크롤이 내려가면 지정한 좌표에 고정된다.
   기준 : 부모 요소의 좌표
   
   
6. z-index
   여러개의 요소가 겹쳐져 있을 때, 무엇이 앞으로 나올지 결정하는 속성
   auto(기본값), 숫자가 클 수록 앞으로 위치하게됨.