상단바 고정하기

BEFORE	AFTER

 

 

CSS

#header {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}
#content{
  margin-top: 80px;
}

/* Media Screen - Mobie */
@media screen and (max-width:767px) {
  #content{
    margin-top: 60px;
  }

 

#header {

1. position

'relative' → 'fixed'로 변경할 경우 위 쪽에 있던 상단바의 컴포넌트가 말 그대로 항상 고정되어 스크롤을 하더라도 화면상에 나타나게 된다.

 

2. z-index

z-index란 3차원의 개념으로 화면상의 가로와 세로가 아닌 화면을 기준으로 수직으로 놓이는 위치를 말한다. 999와 같이 숫자가 높을 수록 z축을 기준으로 가장 위에 위치하여 다른 컴포넌트들보다 앞쪽에 렌더링 된다.

 

3. background-color

rgba를 넣음으로써 (R(Red), G(Green), B(Blue), A(Opacity))를 설정할 수 있다. Opacity, 즉 투명도는 0(투명)~1(불투명)으로 입력할 수 있다.

}

 

#content {

1. margin-top

margin-top이란 위쪽의 여분 공간을 조정하는 함수로 스크롤되지 않은 상태에서 상단바와 content 컴포넌트가 겹쳐보이지 않도록 상단바의 높이만큼 설정한다.

position: relative;	position: fixed;
해당 컴포넌트가 다른 컴포넌트들과 연결되어 있어 스크롤을 해서 내릴경우 사라진다.	해당 컴포넌트가 독립적으로 고정되어 있어 스크롤을 해도 항상 같은 자리에 위치한다. 컴포넌트가 독립적으로 위치하기 때문에 밑에 위치하는 다른 컴포넌트와 겹쳐보일 수 있으므로 위치를 항상 조정해주어야 한다.

}