sticky-elem이 main-message보다 style.css 상에 위에 존재하게 되면 display: none이 적용되지 않는 것을 확인했습니다.
CSS 페이지 내에서 class 순서가 눈에 잘 들어오지 않는데(자주 실수할 것 같은 부분입니다.) 이 부분을 좀 더 효과적으로 관리할 수 있는 방법이 있을까요?&nbsp;

CSS 선택자가 확실하게 우선권을 가지게 하려면, 선택자의 선언 자체를 더 구체적으로 명시해주는 방법이 있습니다.
.modal{}
.modal.active {}
이런 식으로요~ 이렇게 해주시면 순서에 관계 없이, 더 구체적으로 기술된 .modal.active가 우선권을 갖게 됩니다.
CSS선택자 우선순위에 대해 생활코딩에 아주 자세히 기술되어 있는 문서가 있어서, 링크 올려드릴게요!
<a href="https://opentutorials.org/module/484/4149" target="_blank" rel="noopener noreferrer">https://opentutorials.org/module/484/4149</a>

인프런 커뮤니티 질문&답변

main-message, sticky-elem CSS 상 위치에 따른 display 변경