display flex일 때 position: sticky 요소 고정

position: sticky 값을 사용하면 스크롤 시 특정 지점에 도달하면 요소(element)를 고정 할 수 있습니다.

sticky가 제대로 고정 되지 않을 경우 아래 2가지 값을 확인해야 합니다.

 

• 고정 요소에 top, left 값이 있는지 확인 (가로 스크롤의 경우 bottom, right)
• 고정 요소 위 부모 요소에 overflow 값이 hidden, scroll 또는 auto로 설정된 경우

부모 요소가 display: flex일 경우, 세로 정렬 align-items: flex-start 값이 필요합니다.

이유는 flex박스의 align-items은 기본 값으로 stretch로 되어 있어 고정 요소가 컨테이너의 전체 높이를 차지하기 때문에 고정 되지 않습니다.

.container {
  display: flex;
  align-items: flex-start;
  height: 1000px;
}