[CSS] sticky is not working 스티키 속성이 작동안될때

아래 사이트에서 체크리스트를 보자.

How to Fix Issues With CSS Position Sticky Not Working?

Learn possible reasons why CSS position sticky might not be working for you

www.designcise.com

신기하게도 sticky 포지션을 잡아도 작동하지 않는 문제가 발생했다. 몇시간의 디버깅 끝내 이유를 찾았다.

- left 값은 sticky 에 대한 threadhold 값이며, 수평 스크롤시 반드시 지정해야 한다.

- 왼쪽에 sticky 를 붙이고 싶을때 사용한다.

- 반대로 오른쪽에 sticky 를 붙이고 싶다면 right 속성을 주자.

- 1. 최상위 부모 : overflow : scrolling, width 500px 가정

- 2. 직계 부모 요소 : width 3000px 으로 , 최상위 부모 요소는 이 요소를 그리기 위해 스크롤로 표시 된다.

- 3. sticky 요소 : left : 0; position : sticky 설정

- 버그 케이스 : 2번 요소에 overflow: hidden이 있었다.

- 아마도 해당 요소에서 텍스트가 넘치게 되는 경우 숨길려고 했던것 같다.

horizontal scrolling with position: sticky

...

codepen.io