[CSS]부모요소가 display:flex; 일때 사이드 메뉴에 position:sticky; 를 적용해보자

 

부모요소가 display:flex; 일때 사이드 메뉴가 sticky 로 동작하게 하는 방법입니다.

구조는 다음과 같습니다.

HTML

<div class="container">
	<div class="contents">
    	컨텐츠 내용
    </div>
    
    <div class="aside">
    	사이드 메뉴(이부분이 position: sticky; 가 동작할 영역)
    </div>
</div>

스크롤 하면 aside 영역이 sticky 가 될 부분입니다.

 

CSS

.container{
   display:flex;
}

.contents{
   width:calc(100% - 30%); /* aside 영역 만큼 빼줌 */
}

.aside{
   align-self: flex-start; /* 이부분 추가 */
   position: sticky;
   top: 45px;
   right: 0;
   width: 30%;
}

 

flex 컨테이너 내에서 자식 요소들은 기본적으로 align-items 속성에 의해 수직 정렬이 조정됩니다. align-self 속성은 개별 플렉스 아이템의 수직 정렬을 재정의할 수 있도록 합니다. align-self: flex-start;를 사용하면 해당 요소가 컨테이너의 시작 부분에 고정되어, position:sticky;가 올바르게 동작할 수 있게 됩니다. 이는 sticky 요소가 수직 축의 시작 부분에 배치되어야 고정 위치를 유지할 수 있기 때문입니다.

 

align-self: flex-start; 는 flex 요소마다 서로 다른 align 속성값을 설정할 수 있습니다.

 

결론은. sticky 되는 영역에 align-self:flex-start; 를 추가해주면 됩니다.

 

참고사항

sticky 가 동작하려면 contents 영역 내용이 sticky 될 영역 보다 높이가 길어야합니다.

 

[CSS]display:flex 와 display:grid 속성과 설명