헤더 고정하기, 페이지 초반이 헤더에 가려졌을 때

다음은 현재 제작 중인 랜딩 페이지의 일부이다.

여느 페이지가 그러하듯 헤더는 대체로 스크롤을 해도 상단을 유지한다.

 

 

이는 position 속성에 fixed를 주었기 때문에 가능한 것이다.

.status_bar {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 11%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px outset rgb(199, 192, 192, 0.5);
  z-index: 100;
}

 

그런데 여기서 주의할 점은 html의 처음 정보가 헤더 아래에 가려지는 경우다. 

기억할 것은 CSS는 눈속임이라는 것을 기억하자

 

.bigwrap:nth-child(1) {
  padding-top: 13%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

 

페이지 초반이 헤더에 가려지는 것을 방지하기 위해 헤더 다음으로 오는 태그에 padding-top을 주었다.