[CSS] sticky를 사용할 때 bottom 속성을 적용할 수 있는 방법

sticky 포지션은 요소가 스크롤되는 동안 일반적인 문서 흐름을 따라 이동하다가 특정 위치에 도달하면 해당 위치에 고정된다.

이때 고정되는 위치는 top, right, bottom, left 속성을 사용하여 지정할 수 있습니다.

그러나, sticky 포지션에서 bottom 속성을 사용하는 경우,

해당 요소가 스크롤되는 동안 아래로 이동하는 것이 아니라 특정 위치에서 화면 하단에 고정되는 것을 의미한다.

이는 sticky 포지션의 동작 방식과 상충되기 때문에 브라우저가 bottom 속성을 무시하는 것이다.

따라서 다음과 같이 코드를 작성한다고 해서 글자가 바닥에 붙지 않는다.

하지만 방법이 없는 것은 아니다.

flex을 사용하면, sticky 속성값으로 bottom을 사용할 수 있다.

이런식으로 부모에 코드를 적어주면 스크롤을 내려도 요소가 바닥에 붙어 섹션이 끝날때까지 같이 움직인다.