상단바 같은 것을 고정시키고 싶을 때, position: fixed를 사용하게 된다. 그런데 이렇게 할 경우 해당 엘리먼트가 가지고 있던 공간이 사라져서 본문이 위로 올라가게 되어 화면이 가려지거나 뒤틀리게 되는데, position: fixed를 사용할 경우에 해당 엘리먼트가 화면보다 한 층 위로 올라가게 되어 발생하는 일이다.
다음 링크에 답변을 보면 더 이해하기 쉽다.
https://stackoverflow.com/questions/33132586/why-isnt-my-margin-working-with-position-fixed
따라서 이렇게 가려진 부분을 다시 보여주려면, position: fixed를 적용하기 전 해당 엘리먼트가 가지고 있는 부분만큼을 body에서 padding 으로 추가해주면 된다.
참고한 곳
https://www.daleseo.com/css-position-fixed-navigation/
배운것을 기록하자