[HTML/CSS] Header 화면 최상단에 고정시키는 방법

 

요즘에는 헤더에 네비게이션 기능을 적용하고 스크롤 시 함께 내려오도록 하는 UI를 많이 사용합니다.

 

이를 구현하는 간단한 코드를 작성해보겠습니다.

 

 

<header class='header'>
	// 내용 입력
</header>

먼저 간단히 헤더를 생성하고 class명을 지정하였습니다.

 

 

 

.header {
    padding: 0 16px;
    border-bottom: 1px solid var(--color-light-gray);

    position: fixed; /* 상단에 고정 */
    top: 0;
    width: 100%;

    z-index: 999;
}

css 코드에 들어갈 내용은 비교적 간단합니다.

 

header가 계속 최상단에 위치해야 하므로 position을 fixed를 주었습니다.

그리고 어떤 요소라도 header보다 높은 위치에 있으면 안되기 때문에 z-index를 높게 지정해주었습니다.

 

 

 

이렇게 하면 스크롤이 내려오더라도 헤더가 상단에 위치하는 것을 볼 수 있습니다.

 

 

 

문제는 fixed로 상단에 고정해두었기 때문에, 아래 있던 요소들이 아래쪽으로 들어가버리는 문제가 발생합니다.

 

 

 

.navbar__header {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);

    padding: 0 16px;
    border-bottom: 1px solid var(--color-light-gray);

    position: fixed; /* 상단에 고정 */
    top: 0;
    width: 100%;

    z-index: 999;
}

body {
    margin-top: 120px;
}

가장 간단한 방법은 header에 지정한 높이만큼 body에서 margin을 주는 것입니다.

 

저는 header의 크기가 120px이기 때문에 body의 margin-top을 120px을 주었습니다.

 

추가적으로 이전에는 본문 내용과 헤더가 겹치는 것을 보여드리기 위해서 투명하게 작성하였던 부분의 background-color에 흰색과 블러 처리를 진행하였습니다.

 

 

 

이제 처음 화면에 접근하더라도 본문의 내용이 헤더와 겹치지 않고 정상적으로 출력되는 것을 확인할 수 있습니다.