편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.
| 최신판 | 당신의 편집 | ||
| 3번째 줄: | 3번째 줄: | ||
;CSS position 속성 | ;CSS position 속성 | ||
==값 목록== | |||
*static: 위에서 아래로 순서대로 배치됨(기본값).top, left 지정 무시됨 | |||
*relative: 상대적인 위치 | |||
*absolute: 절대적인 위치(부모 기준)<ref>단, 부모가 static(기본값)이면 화면의 (0, 0)이 기준이 됨</ref> | |||
*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-a'>A1</div> | |||
<div class='box box-a'>A2</div> | |||
</div> | </div> | ||
<div class='container'> | <div class='container'>나 | ||
<div class='box box-b'>B1</div> | |||
<div class='box box-b'>B2</div> | |||
</div> | </div> | ||
<div class='container'> | <div class='container'>다 | ||
<div class='box box-c'>C1</div> | |||
<div class='box box-c'>C2</div> | |||
</div> | </div> | ||
<div class='container'> | <div class='container'>라 | ||
<div class='box box-d'>D1</div> | |||
<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>D1은 D2 아래에 겹쳐 있어서 보이지 않음</ref> | ||
< | :→ 예제: http://jmnote.com/css/position.php | ||
==같이 보기== | ==같이 보기== | ||
* [[CSS position absolute | *[[CSS position absolute 상세]] | ||
* [[CSS left, top 속성]] | *[[CSS left, top 속성]] | ||
* [[CSS float 속성 | *[[CSS float 속성]] | ||
==주석== | ==주석== | ||
<references/> | <references/> | ||
==참고== | ==참고 자료== | ||
*http://www.w3schools.com/cssref/pr_class_position.asp | *http://www.w3schools.com/cssref/pr_class_position.asp | ||
[[분류: CSS]] | [[분류: CSS]] | ||