[CSS] display: flex 에서 sticky 사용하는 방법

예전 프로젝트에서 이거 때문에 삽질 좀 했던 것 같은데 또 까먹었다.

별거 없기 때문에 쓸 것도 없다.

 

Check 1. 부모 요소에서 overflow 설정

 

부모 컴포넌트에서 overflow가 hidden; auto; scroll;이 아닌지 확인해준다.

sticky는 뷰포트가 아니라 부모 컨테이너에 영향을 받는다고 한다.

 

Check 2. 부모 요소의 크기를 설정해줬는가?

 

크기를 적절하게 설정해줘야 한다. 부모의 위치에 대해서 붙기 때문에, 개발자 도구에서 크기를 가지도록 설정해주면 된다.

 

Check 3. [가장 중요⭐] align-self: start 해주기!

 

align-self는 flex 내부 요소의 정렬을 스스로 설정할 수 있도록 지원해준다.

start로 넣어주면 flex container 앞쪽으로 정렬이 되기 때문에 flex container와 똑같은 레벨로 인식되는 것 같다.

 

내 경우는, sticky를 적용시킬 요소를 담고있는 container에 sticky를 적용했을 때는 되지만,

flex-container 안의 요소에는 적용되지 않았다. align-self: start를 통해 flex-container 레벨로 설정해주면, sticky가 적용되는 것으로 보인다.