[CSS] navbar fixed 설정 시 div와 겹치는 문제 해결방법

웹사이트를 개발하다보면 사용자들이 가장 많이 사용하는 것은 페이지 맨 위에 있는 navbar라고 할 수 있습니다.

 

오늘은 이 navbar를 만드는 과정에서 position: fixed를 부여했을 때, 그 밑에 있는 div의 내용이 겹쳐 보이는 상황을 해결하는 방법을 알려드리려고 합니다!

 

문제

navbar에 본문 div가 침범해있는 것을 볼 수 있습니다.

 

해결방법

padding-top을 nav의 height만큼 주면 문제를 해결할 수 있습니다.

결과

이후, div가 navbar 바로 밑에 위치하는 것을 볼 수 있습니다.