[css]css position을 이용하여 상단고정 시키기 <fixed>

position 을 이용하여 상단 엘리먼트 고정 시키기

 

 

위와 같이 상단 TOP 부분을 고정 시키고 스크롤을 내리면 CON 부분만 스크롤 잡히게 하는 방법 입니다.

뭐 css/position에 대해 잘 이해하고 계신다면, 금방 할 수 있는 방법이라 생각됩니다.

위 방법의 핵심은 fixed입니다.

 

top/con 을 감싸고 있는 wrap이 있습니다.

이 wrap에다 postion:relative를 주고, 그 안에 top에 position:fixed를 줬습니다.

fixed 옵션을 줬기 때문에 relative를 갖고 있는 영역을 기준으로 고정이 되는 것 입니다.

con 부분은 top 영역과 겹쳐진 상황이라 padding-top을 주어 내용부분을 밑으로 내렸습니다.

 

이러한 방법을 잘 응용하면 될거 같구요. 뭐 다른 방법도 많이 있겠습니다만... css를 깊게 배우지 않았던 터라 추후 알게되면 또 포스팅 하기로 하겠습니다.

 

 

     body{margin:0;padding:0;}
     .wrap{position:relative;width:100%;}
     .top{position:fixed;top:0;left:0;z-index:10;width:100%;height:100px;background-color:red;}
     .con{position:relative;z-index:5;padding-top:120px;width:100%;height:1000px;background-color:blue;}