웹 페이지를 스크롤해도 탐색 모음(내비게이션 바)이 항상 화면 상단에 고정되어 있도록 만들고 싶다면 CSS의 position: fixed 속성과 top 속성을 함께 사용하면 됩니다.
position: fixed는 요소를 뷰포트(브라우저 화면) 기준으로 고정시키는 값입니다. 여기에 top: 0을 지정하면 요소가 화면 맨 위에 붙어 있게 되며, 사용자가 페이지를 아무리 스크롤해도 내비게이션 바가 사라지지 않고 항상 상단에 표시됩니다.
핵심 CSS 속성 정리
- position: fixed; — 요소를 뷰포트 기준으로 고정합니다.
- top: 0; — 화면 최상단에 배치합니다.
- width: 100%; — 내비게이션 바가 화면 전체 너비를 차지하도록 합니다.
예제 코드
아래 예제를 실행하면 스크롤과 관계없이 항상 화면 상단에 고정된 메뉴를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 1px solid white;
}
li a {
display: block;
padding: 8px;
background-color: orange;
}
li:last-child {
border-right: none;
}
div {
padding:30px;
margin-top:40px;
background-color:white;
}
</style>
</head>
<body>
<ul>
<li><a href = "#home">Home</a></li>
<li><a href = "#news">News</a></li>
<li><a href = "#contact">Contact</a></li>
<li><a href = "#about">About</a></li>
</ul>
<div>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
<p>고정 메뉴 동작 확인용 데모 텍스트입니다.</p>
</div>
</body>
</html>코드 설명
1. 내비게이션 바 고정하기
<ul> 요소에 list-style-type: none;을 적용해 기본 불릿(bullet)을 제거하고, position: fixed;와 top: 0;, width: 100%;를 지정하여 메뉴가 화면 전체 폭을 차지한 채 최상단에 고정되도록 했습니다.
2. 메뉴 항목 가로 배치
<li> 요소에 float: left;를 적용해 메뉴 항목들이 왼쪽부터 차례대로 가로로 나열되도록 하고, border-right로 각 항목 사이에 흰색 구분선을 추가했습니다. 마지막 항목에는 :last-child 선택자로 오른쪽 경계선을 제거해 깔끔한 마감 처리를 했습니다.
3. 본문과의 겹침 방지
position: fixed로 고정된 요소는 문서 흐름에서 벗어나기 때문에, 그 아래 내용이 내비게이션 바에 가려질 수 있습니다. 이를 방지하기 위해 본문 <div>에 margin-top: 40px;을 적용해 내비게이션 바 높이만큼 상단 여백을 확보했습니다.
참고: sticky와의 차이점
비슷한 효과를 내는 속성으로 position: sticky;가 있습니다. fixed는 요소가 처음부터 화면에 고정되는 반면, sticky는 요소가 원래 위치에 있다가 스크롤이 특정 지점에 도달하면 그 자리에서 고정됩니다. 상단 내비게이션처럼 항상 보여야 하는 경우에는 fixed가 일반적으로 더 적합합니다.