초간단 상단 무조건 고정
<div id="goTop">
고정될 영역
</div>
<div id="main">
움직일(스크롤) 영역
</div>
<style>
#goTop { position: fixed; top: 0px; left: 0; width: 100%; height:150px; z-index:100;background-color:#fff}
#main {padding-top:150px}
</style>
-- goTop 영역은 position: fixed; 을 주었기 때문에 아래 영역과 겹칩니다.
-- 아래 움직일 영역 main은 padding-top: 150px로 주어 아래로 150px 내렸습니다.
왼쪽, 오른쪽, 하단 부분도 고정해 보세요~~
고정될 영역
</div>
<div id="main">
움직일(스크롤) 영역
</div>
<style>
#goTop { position: fixed; top: 0px; left: 0; width: 100%; height:150px; z-index:100;background-color:#fff}
#main {padding-top:150px}
</style>
-- goTop 영역은 position: fixed; 을 주었기 때문에 아래 영역과 겹칩니다.
-- 아래 움직일 영역 main은 padding-top: 150px로 주어 아래로 150px 내렸습니다.
왼쪽, 오른쪽, 하단 부분도 고정해 보세요~~
댓글 3개
12년 전
감사합니다
12년 전
좋은 팁 고맙습니다. ^^
11년 전
스크랩 합니다.
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3109 |
gstaron
|
12년 전 | 4790 | |
| 3108 |
 마루Design |
12년 전 | 6802 | |
| 3107 | 12년 전 | 6834 | ||
| 3106 |
 변태스타킹 |
12년 전 | 8216 | |
| 3105 | 12년 전 | 6279 | ||
| 3104 | 12년 전 | 4794 | ||
| 3103 |
 wintex |
12년 전 | 4872 | |
| 3102 | 12년 전 | 3952 | ||
| 3101 | 12년 전 | 6985 | ||
| 3100 | 12년 전 | 6038 | ||
| 3099 | 12년 전 | 9974 | ||
| 3098 | 12년 전 | 3680 | ||
| 3097 |
lainfox
|
12년 전 | 4456 | |
| 3096 |
 cshop2 |
12년 전 | 10427 | |
| 3095 | 12년 전 | 4446 | ||
| 3094 | 12년 전 | 5107 | ||
| 3093 |
하늘바람구름
|
12년 전 | 4292 | |
| 3092 |
 raineye |
12년 전 | 8895 | |
| 3091 |
HackYa |
12년 전 | 9325 | |
| 3090 |
 신현종실장 |
12년 전 | 6554 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기