[CSS] 메뉴 바 상단 고정 시키기(fixed)

position-fixed의 특징

CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 어떤 엘리먼트의 position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있게 됩니다. 뿐만 아니라, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기 때문에, 다른 엘리먼트들이 상하좌우로 움직일 때, position 속성이 fixed로 설정되어 있는 엘리먼트는 그 자리에서 움직이지 않습니다. 상단에 고정되어 있는 메뉴바/네비게이션을 만드는 방법에 대해서 알아보겠습니다.

 

- 우선 상단 메뉴영역과 메인영역을 Html을 통해 간단히 작성해준 후 메뉴바를 눈에 잘들어올 수 있도록 간단히 색상 및 기본 설정만 만들어 주었습니다.

- 그리고 지금은 result화면 우측에 있는 스크롤 바를 아래로 내려주면 메뉴바는 아직 이동되지 않고, 화면 이동만 이루어 지는 것을 볼수 있습니다.

 

-이제 CSS에 position과 몇 가지 설정을 조금 더 추가해주어 원하는 고정 메뉴바를 아래 만들어 보겠습니다.

  .main {
     	 padding-top: 30px;  
         /* 상단 메뉴의 position 값을 fixed로 두게되면 메뉴가 부모의 영역에서 벗어나 독립적이어
         지기 때문에 아래 본문을 가리게되는데 이를 막기 위해 margin-top 값을 줌*/
        }
        
  .fixed {
 	    position: fixed;
    	top: 0;
        /* position값을 fixed를 주고 top값을 0을 주게되면 최상단에 달라붙듯이 고정이된다.*/
        width: 100% 
        /* 그 후 양쪽의 여백이 없도록 가득 차게 하기위해 두가지의 방법이 있는데 하나는 width를
        100%로 설정해주는 것이고, 다른 방법으로는 left, right 값을 0으로 주는 것이다.*/
        /* left: 0;
        right: 0;  */  
        }

= > 추가된 CSS 정리 및 설명       

메뉴 컨테이너 class 외 미리 설정해두었던 fixed 라는 class에 position값을 fixed를 주고 top값을 0을 주게되면 최상단에 달라붙듯이 고정이된다. 그 후 양쪽의 여백 없도록 가득 차게 하기위해 두가지의 방법이 있는데 하나는 width를 100%로 설정해주는 것이고, 다른 방법으로는 left, right 값을 0으로 주는 것이다.

 

상단 메뉴의 position 값을 fixed로 두게되면 메뉴가 부모의 영역에서 벗어나 독립적이어지기 때문에 아래 본문을 가리게되는데 이를 막기 위해 main영역에 margin-top 값을 주어 가려짐을 막아준다.
  

 

 

- CSS에 postion : fixed 및 추가 값들을 적용 시켜준 결과를 보면 이제 아무리 스크롤바를 내려도 상단에 고정되어 있는 것을 볼 수 있습니다.