148. [CSS] CSS Position TIL23.04.11

---

 

static

position 속성의 기본값
요소를 문서 흐름에 따라 배치

 

 

relative

요소를 원래 위치를 기준으로 상대적으로 배치
top, right, botto, left 속성으로 위치 조정 가능

 

 

absolute

절대 위치 지정 요소
요소를 가장 가까운 부모 요소를 기준으로 배치
문서의 흐름에 영향을 받지 않음
부모 요소 중 position 속성이 static이 아닌 요소를 찾아 기준으로 삼는데, 
만약 부모 요소가 없다면 body 요소를 기준으로 삼는다.
top, right, bottom, left 속성으로 위치 조정 가능

 

 

fixed

요소를 뷰포트 기중으로 고정하여 배치
스크롤을 내려도 요소가 화면에 고정되어 있음
top, right, bottom, left 속성으로 위치 조정 가능

 

 

sticky

요소를 가장 가까운 스크롤 가능한 부모 요소를 기준으로 배치
스크롤이 해당 요소의 위치에 도달하면 요소가 고정됨
top, left, right, bottom 속성으로 위치 조정 가능

 

특정 위치에 도달하면 아래처럼 고정됨

 

 

 

(출처)https://developer.mozilla.org/ko/docs/Web/CSS/position