개요
이 속성은 요소가 위치할 방식을 지정한다.
top, right, bottom, left 속성으로 간격(offset)을 지정할 수 있으며, z-index로 z축 순서를 지정할 수 있다. 단 정상(static) 위치는 지정할 수 없다.
정의
값
| 값 | 설명 |
|---|
| static | 정상적으로 지정한다. 'top', 'right', 'bottom', 'left' 속성을 지정할 수 없다. |
| relative | 상대적인 위치를 지정한다. 정상 흐름을 유지하며, 자신의 위치로부터 상대적으로 위치한다. |
| absolute | 절대적인 위치를 지정한다. 정상 흐름으로부터 제외돼서, 화면 배치에 영향을 주지 않는다. |
| fixed | 위치를 고정한다. 절대적인 위치와 비슷하지만, 화면 표시 영역viewport에서 스크롤할 때 이동하지 않고, 인쇄시 페이지의 같은 위치에 계속 출력된다. |
| inherit | 부모 요소의 값을 상속하도록 지정한다. |
예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.special1{
position: relative;
color: #900;
font-weight: bold;
}
.special2{
position: absolute;
left: 170px;
top: 55px;
font-weight: bold;
color: #00F;
}
-->
</style></head>
<body>
<p>상대방을 <span class="special1">특별한 존재</span>로 인정해주는 것, <br />
그것이 바로 평범함을 특별함으로 바꾸는, <br />
잠재되어 있던 무한한 <span class="special2">가능성</span> 을 일깨워주는 <br />
의욕의 날개였던 것이다. </p>
</body>
</html>
브라우저 호환성
| 값 | IE6 | IE7 | FF2 | Op9 |
|---|
| static | 지원 | 지원 | 지원 | 지원 |
| relative | 불안정 | 불안정 | 지원 | 지원 |
| absolute | 불안정 | 불안정 | 지원 | 지원 |
| fixed | 미지원 | 불안정 | 지원 | 지원 |
| inherit | 미지원 | 미지원 | 지원 | 지원 |
고경희 (211.110.121.143)
2009년 08월 01일, 14:00
