맛집 여행 캠핑 일상 생활

HTML/CSS Layer 특정위치에 고정시키기 본문

HTML.CSS

HTML/CSS Layer 특정위치에 고정시키기

♥ 영은파더♥ 2016. 3. 21. 12:08

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입니다.


▶ 테스트해보기

Layer Position




위의 버튼을 눌러서 테스트


▶ 예제소스

<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 폼메일 소스  (60) 2016.04.26
HTML CSS 크기 단위  (0) 2016.04.20
웹페이지 프린터 출력 CSS STYLE 예제  (0) 2016.03.25
HTML/CSS Layer 특정위치에 고정시키기  (0) 2016.03.21
Trackback : 0 | Comments : 0
댓글쓰기 폼