CSS에서 position 속성은 엘레멘트의 위치를 지정할 때 사용한다. 이 때 top, bottom, left, right 속성을 사용하여 포지션을 지정할 수 있는데, 포지션을 지정하기 위해서는 먼저 포지션 방법을 설정해 주어야 한다. postion 속성을 사용하면 다른 엘레멘트로 다른 엘레멘트를 감출 수도 있고, 열거 시킬 수도 있다. 또한, float 속성에는 left, right 값만 있고 center 값이 없기 때문에 position 속성을 사용해 엘레멘트를 가운데로 위치시키거나 원하는 지점으로 이동시킬 수 있다.
■ 포지셔닝 방법(Positioning Methods)
1) static
: HTML 페이지의 기본값이며, 정상 흐름(Normal flow)에 따라 엘레멘트가 위치된다. 이 포지셔닝에서 top, bottom, left, right 속성은 무시된다. 또한, 스크롤에도 영향을 받지 않는다.
2) fixed
: fixed 포지셔닝은 브라우저 창을 기준으로 상대적 좌표에 엘레멘트를 고정 시키는 방법이다. 이 방법을 인터넷 익스프롤러에서 사용하기 위해서는 !DOCTYPE 선언을 반드시 선언해야 한다.
fixed 포지셔닝된 엘레멘트는 정상흐름에서 완전히 제거 되어진다. 이 때 문서와 다른 엘레멘트들은 fixed 포지셔닝된 엘레멘트를 존재하지 않는 것으로 인식한다. 또한, 문서의 스크롤의 영향도 받지 않고 문서의 고정된 좌표에 위치하게 된다.
<p>절대적 좌표에 위치시키는 position 테스트</p>
<p>테스트 // 테스트 // 테스트</p>
<p>테스트 // 테스트 // 테스트</p>
<p>테스트 // 테스트 // 테스트</p>
<p>테스트 // 테스트 // 테스트</p>
<div style="position; top:20px; left:20px;">포지셔닝 테스트</div>
3) relative
: 정상적인 흐름을 기준으로 상대적 위치를 지정하여 엘레멘트를 위치시키는 방법이다. 상대적으로 이동된 엘레멘트는 다른 엘레멘트 위로 overlap 되며, 상대적 포지셔닝은 정상흐름을 그대로 유지하고, 정상위치에서 상대적 좌표에 엘레멘트를 위치시킨다.
<div>기본 엘레멘트</div>
<div style="position:relative; left:50px;">포지셔닝 테스트</div>
4) absolute
: absolute 포지셔닝은 엘레멘트를 절대 위치에 고정할 때 사용하는 값이다. 이 절대 위치의 기준은 HTML 문서의 젤 처음 부모 엘레멘트를 기준으로 한다. <html> 태그 다음에 나오는 첫번째 부모 엘레멘트를 기준으로 엘레멘트를 위치시키며, 정상흐름에서 제외되며, 문서와 다른 엘레멘트들은 fixed 포지셔닝된 엘레멘트를 존재하지 않는 것으로 인식한다.
<div>기본 엘레멘트</div>
<div style="position:absolute; top:50px; left:50px;">절대적 위치 포지셔닝 테스트</div>
위치를 지정할 때 top이나 left값을 지정하지 않는다며, 정상적인 흐름을 기준으로 현재 위치에 절대적으로 표시되게 된다.
<div>기본 엘레멘트</div>
<div style="position:absolute; left:100px;">절대적 위치 포지셔닝 테스트</div>
<div>테스트</div>
※ overlapping 된 엘레멘트 처리
정상흐름에서 벗어나 포지셔닝된 엘레멘트는 다른 엘레멘트 위에 overlapping 된다. 이 때 z-index 속성을 사용하여 다른 엘레멘틍 아래 위치 시킬 수도 있다.
<div>기본 엘레멘트</div>
<div style="position:absolute; top:50px; left:100px; z-index:-1;">절대적 위치 포지셔닝 테스트</div>
<div style="position:absolute; top:80px; left:150px; z-index:-2;">절대적 위치 포지셔닝 테스트</div>
'HTML& CSS > CSS' 카테고리의 다른 글
| CSS을 사용하여 레이아웃(layout) 잡기 (0) | 2011.01.04 |
|---|---|
| 필드셋,레전드,ul, li, 라벨을 사용한 입력폼 만들기 (0) | 2009.12.03 |
| 고급 - 흐름(floating) (0) | 2009.10.18 |
| 고급 - 엘레멘트 영역의 너비(width)와 높이(height) (0) | 2009.10.18 |
| 고급 - 그룹선택자(Grouping selectors)와 집합선택자(Nesting selectors) (0) | 2009.10.18 |