| 속성 값

1. static

static값은 기본값입니다.

HTML 요소가 문서의 일반 흐름에 따라서 배치가 되고,

top, left, bottom, right 같은 속성값을 사용할 수 없습니다.

relative값은 HTML요소를 원래 위치에 상대적으로 위치시킬 수 있습니다.

top, left, bottom, right 속성값을 사용하여 위치시킬 수 있습니다.

absolute값은 HTML요소를 가장 가까운 위치에 있고

position속성이 static이 아닌 상위 요소에 상대적으로 배치시킬 수 있습니다.

만약 position속성이 static이 아닌 상위 요소가 없으면 문서의 최상위 요소인 <body>에 상대적으로 배치가 됩니다.

따라서 기준으로 사용하고 싶은 상위 요소에 position속성을 static에서 relative로 바꿔주고

위치를 변경시키고 싶은 요소에 position 속성을 absolute로 바꾸어 주면 됩니다.

그리고 top, left, bottom, right 속성값을 사용하여 위치시킬 수 있습니다.

fixed 값은 HTML요소를 브라우저 창에 상대적으로 배치시킬 수 있고

위치를 고정시켜서 스크롤해도 화면상 동일한 위치에 계속 유지됩니다.

이런 식으로 부모 요소에 상관없이 지정한 한 곳에 고정이 됩니다.

sticky값은 사용자의 스크롤 위치에 따라서 요소를 고정시킬 수 있습니다.

위 예제처럼 스크롤이 내려가면서 해당위치에 오면 그대로 고정된 상태가 됩니다.