Position
개요 : 이 속성은 요소가 위치할 방식을 지정한다.
top, right, bottom, left 속성으로 간격(offset)을 지정할 수 있으며, z-index로 z축 순서를 지정할 수 있다. 단 정상(static)위치는 지정할 수 없다.
정의
position | 설명 |
값 | static | relative | absolute | fixed | inherit |
기본값 | static |
적용대상 | 생성된 내용을 제외한 모든 요소 |
상속 | 안됨 |
백분율 | 사용 불가 |
미디어 | visual |
값
값 | 설명 |
static | 정상적으로 지정한다. 'top', 'right', 'bottom', 'left' 속성을 지정할 수 없다. |
relative | 상대적인 위치를 지정한다. 'static'과 같은 정상 흐름을 유지하며, 지정한 오프셋만큼 자신의 위치로부터 상대적으로 위치한다. |
absolute | 절대적인 위치를 지정한다. 정상 흐름으로부터 제외돼서, 화면 배치에 영향을 주지 않는다. |
fixed | 위치를 고정한다. 절대적인 위치와 비슷하지만, 화면 표시 영역 viewport 에서 스크롤할 때 이동하지 않고, 인쇄시 페이지의 같은 위치에 계속 출력된다. |
inherit | 부모 요소의 값을 상속하도록 지정한다. |
예>
<style>.special1{ position: relative; color: #900; font-weight: bold;}.special2{ position: absolute; left: 170px; top: 55px; font-weight: bold; color: #00F;}</style><body><p>상대방을 <span class="special1">특별한 존재</span>로 인정해주는 것, <br />그것이 바로 평범함을 특별함으로 바꾸는, zzzzzzzzzz<br />잠재되어 있던 무한한 <span class="special2">가능성</span> 을 일깨워주는 <br />의욕의 날개였던 것이다. </p></body>
--------------------------------------------------------------------------------------------------------
Result :
''.' Programs > CSS' 카테고리의 다른 글
| 미디어 (0) | 2012.03.20 |
|---|---|
| visibility (0) | 2012.03.20 |
| Top (0) | 2012.03.20 |
| Right (0) | 2012.03.20 |
| Bottom (0) | 2012.03.20 |