편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
최신판 | 당신의 편집 | ||
3번째 줄: | 3번째 줄: | ||
;CSS position 속성 | ;CSS position 속성 | ||
==값 목록== | |||
*static: 위에서 아래로 순서대로 배치됨.top, left 지정 무시됨. | |||
*relative: 상대적인 위치 | |||
*absolute: 절대적인 위치 | |||
*fixed: 절대적인 위치(화면 기준). 스크롤해도 화면 위치 그대로 고정됨. | |||
==예시== | ==예시== | ||
17번째 줄: | 13번째 줄: | ||
<style> | <style> | ||
.container { | .container { | ||
margin: 20px; | |||
height: 200px; | |||
background-color: silver; | |||
font-size: 30px; | |||
} | } | ||
.box { | .box { | ||
width: 40px; | |||
height: 40px; | |||
left: 40px; | |||
top: 40px; | |||
} | } | ||
.box- | .box-a { | ||
position: static; | |||
background-color: red; | |||
} | } | ||
.box- | .box-b { | ||
position: relative; | |||
background-color: green; | |||
} | } | ||
.box- | .box-c { | ||
left: 100px; | |||
position: absolute; | |||
background-color: blue; | |||
} | } | ||
.box- | .box-d { | ||
left: 200px; | |||
position: fixed; | |||
background-color: yellow; | |||
} | } | ||
</style> | </style> | ||
<div class='container'> | <div class='container'>가 | ||
<div class='box box- | <div class='box box-a'>A1</div> | ||
<div class='box box- | <div class='box box-a'>A2</div> | ||
</div> | </div> | ||
<div class='container'> | <div class='container'>나 | ||
<div class='box box- | <div class='box box-b'>B1</div> | ||
<div class='box box- | <div class='box box-b'>B2</div> | ||
</div> | </div> | ||
<div class='container'> | <div class='container'>다 | ||
<div class='box box- | <div class='box box-c'>C1</div> | ||
<div class='box box- | <div class='box box-c'>C2</div> | ||
</div> | </div> | ||
<div class='container'> | <div class='container'>라 | ||
<div class='box box- | <div class='box box-d'>D1</div> | ||
<div class='box box- | <div class='box box-d'>D2</div> | ||
</div> | </div> | ||
<div class='container'> | <div class='container'>마</div> | ||
<div class='container'> | <div class='container'>바</div> | ||
<div class='container'> | <div class='container'>사</div> | ||
</source> | </source> | ||
:→ | :→ (static) A1, A2는 left, top이 무시되고 "가" 아래로 차례로 출력됨 | ||
:→ | :→ (relative) B1, B2는 "나" 아래를 기준으로 (40, 40) 위치부터 차례로 출력됨 | ||
:→ | :→ (absolute) C2는 화면 기준으로 (100, 40) 위치에 출력됨<ref>C1은 C2 아래에 깔려서 보이지 않음</ref> | ||
:→ | :→ (fixed) D2는 화면 기준으로 (200, 40) 위치에 출력됨. 단, 스크롤해도 고정되어 있음<ref>C1은 C2 아래에 깔려서 보이지 않음</ref> | ||
< | :→ 예제: http://jmnote.com/css/position.php | ||
==같이 보기== | ==같이 보기== | ||
*[[CSS left, top 속성]] | |||
* [[CSS left, top 속성]] | |||
==참고== | ==참고 자료== | ||
*http://www.w3schools.com/cssref/pr_class_position.asp | *http://www.w3schools.com/cssref/pr_class_position.asp | ||
[[분류: CSS]] | [[분류: CSS]] |