position

 

position은 CSS에서 사용하는 속성으로 주로 HTML 문서 상에서 요소가 배치되는 방식을 결정할때 사용합니다.

많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용합니다.

 

position에는 static, relative, abosoulte, fixed, sticky 속성이 존재합니다.

(부모요소의 속성을 물려받는 속성이나 지정하는 않는 속성들은 제외)

 

 

static : position 속성의 기본값으로 문서의 흐름에 맞게 배치가 됨.

 

relative:  하나의 상위 엘리먼트를 기준으로 삼아 사용. static 속성이 걸린 해당 엘리먼트가 기준이 됨

                (left:50px 인경우 static이 걸린 엘리먼트의 기준으로 왼쪽에서 50px이 밀어버림)

 

absolute: static이나 relative속성이 있는 엘리먼트를 기준으로 설정이 되며 다른 엘리먼트의 공간(여백)에 영향을 받지 않고 화면 위에 떠있게 됨.

 

fixed: fixed속성 또한 absolute와 같이 다른 엘리먼트의 공간, 즉 문서의 흐름에 영향에 받지않고 화면위에 떠있게 되는데,

여기서 absolute와 다른 점은 상위 요소가 relative가 기준이 되는 것이 아닌 브라우저 창(화면)을 기준으로 배치를 한다는 것.

 

sticky: sticky속성은 top,bottom,left,right 속성이 필수적으로 필요하다. 기준은 스크롤이 걸리는 상위 엘리먼트를 기준으로 한다.

top:50px으로 설정했을 때 평소에는 relative의 속성으로 존재하다가 스크롤 걸리는 박스에서 지정한 속성만큼 스크롤이 내려가면 fixed의 속성으로 바뀌게 되며 50px위치에 멈춰서 화면에 존재하게 된다. 

스크롤이 sticky의 상위 엘리먼트를 지나치면 sticky가 걸린 엘리먼트는 다시 relative속성으로 돌아가게 됩니다.  

 

출처: https://tech.lezhin.com/2019/03/20/css-sticky

CSS { position: sticky }