CSS 페이지 스크롤시 헤더를 고정시키기

페이지 스크롤시 헤더를 고정시키기

페이지를 스크롤해 아래의 내용을 위로 올릴 때 헤더를 고정시키려면 position:fixed를 이용한다.

<style>

div#header{

    background-color:#02c7ea;

    position:fixed;

    width:100%;

    top:0;

    left:0;

}

div#logo{

float:left;

width:50%;

padding:10px 0 0 20px;

}

ul.nav{

float:left;

list-style:none;

width:45%;

}

ul.nav li{

float:left;

}

ul.nav a{

line-height:40px;

color:#FFFFFF;

padding:0 15px;

text-decoration: none;

}

</style>

<div id="header">

     <div id="logo"><img src="flower.jpg" width="50" height="50"></div>

     <div>

        <ul class="nav">

           <li><a href="#">회사소개</a></li>

           <li><a href="#">제품정보</a></li>

           <li><a href="#">기술정보</a></li>

           <li><a href="#">게시판</a></li>

           <li><a href="#">공지사항</a></li>

        </ul>

     </div> 

</div>

 

 <div align="center"><img src="rue.jpg"></div>

<스크롤하기 전>

<스크롤한 후 - 해더가 고정되어 있음>