상단 메뉴 고정 & position: fixed

목적

페이지 마크업 연습 및 기록 남기기

 

 

Top Menu List Fixed 고정

마크업 사이트들을 살펴 볼때 이 처럼 스크롤을 내려도

상단이 고정되어 있는 것을 볼 수 있다.

.top-list {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  background-color: white;
}

css

top-list 에서

position : fixed;

top: 0;

 

width: 100%;

or

left: 0;

right: 0;

 

width: 100%; 를 설정하든 left: 0; right: 0;을 하던 값은 같다.

설정을 해주면 상단 메뉴바가 고정 되는 것을 확인할수 있다.

 

 

여기서 문제! 상단 메뉴가 고정되면서 일부 컨텐츠가 보이지 않는다.

해결방법

body {
  padding-top: 100px; 
}

설정해주면 컨텐츠가 모두 나오는것을 확인 할 수 있다.