| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 소비전력
- 티스토리
- 알리익스프레스
- Apache
- 시놀로지
- proxmox
- SKT
- 자바스크립트
- 복현오거리
- centos
- 램가스초월
- 라즈베리파이2
- KB국민카드
- jQuery
- 알뜰폰
- ConoHa
- php
- OpenWrt
- 아파치
- 킹북이초월
- 보르비스초월
- 리눅스
- KB증권
- 윈도우10
- iptime
- mysql
- PHP-FPM
- 스톤에이지
- Rocky
- 가상서버호스팅
- Today
- Total
맛집 여행 캠핑 일상 생활
HTML/CSS Layer 특정위치에 고정시키기 본문
Layer 특정위치에 고정시키기
▶ CSS 특정레이어 고정
<style type="text/css">
#originLayerStatic {position:static;}
#LeftTopLayerFixed {position:fixed;left:0;top:0}
#RightTopLayerFixed {position:fixed;right:0;top:0}
#LeftBottomLayerFixed {position:fixed;left:0;bottom:0}
#RightBottomLayerFixed {position:fixed;right:0;bottom:0}
</style>
위에서 부터 좌측상단, 우측상단, 좌측하단, 우측하단 고정시키는 CSS입니다.
▶ 테스트해보기
위의 버튼을 눌러서 테스트
▶ 예제소스
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#originLayerStatic {position:static;}
#LeftTopLayerFixed {position:fixed;left:0;top:0;z-index:10000;}
#RightTopLayerFixed {position:fixed;right:0;top:0;z-index:10000;}
#LeftBottomLayerFixed {position:fixed;left:0;bottom:0;z-index:10000;}
#RightBottomLayerFixed {position:fixed;right:0;bottom:0;z-index:10000;}
</style>
</head>
<body>
<p><br /></p>
<div id="positionLayer" style="width:200px;height:140px;border:1px solid #ff0000;text-align:center;background-color:rgba(255,255,200,0.5);">
Layer Position<br />
<br />
<input type="button" value="원래위치로 돌아가기" onclick="$(this).parent().attr('id','originLayerStatic');">
<br />
<input type="button" value="좌측상단" onclick="$(this).parent().attr('id','LeftTopLayerFixed');">
<input type="button" value="우측상단" onclick="$(this).parent().attr('id','RightTopLayerFixed');">
<br />
<input type="button" value="좌측하단" onclick="$(this).parent().attr('id','LeftBottomLayerFixed');">
<input type="button" value="우측하단" onclick="$(this).parent().attr('id','RightBottomLayerFixed');">
<br />
위의 버튼을 눌러서 테스트
</div>
<p><br /></p>
</body>
</html>
'HTML.CSS' 카테고리의 다른 글
| CSS text-overflow 속성 (0) | 2016.05.03 |
|---|---|
| CSS word-break 속성 (0) | 2016.05.03 |
| HTML PHP 폼메일 소스 (61) | 2016.04.26 |
| HTML CSS 크기 단위 (0) | 2016.04.20 |
| 웹페이지 프린터 출력 CSS STYLE 예제 (0) | 2016.03.25 |
