흔히들...position:absolute 이 속성을 레이어 띄우기용으로만 사용하는데...

position값의 속성을 자세히 알면...

훨씬 다양한 레이어를 구성할 수 있다.

position속성에는 4가지 값이 존재한다.

absolute, relative, static, fixed

이중

static값은 position속성을 사용하지 않았을 때의 값이고...

fixed값은 프린트용 (워드나 아래아한글에서 머리글,바닥글과 유사한 용도) CSS속성으로 비쥬얼브라우저나 미디어브라우저에서는 쓰이지 않을 것이다.

그럼 2가지밖에 없다...^^...

absolute와 relative 모두

태그가 시작하는 위치로부터 left,top,right,bottom값의 영향을 받아 위치를 변경할 수 있다.

단, 다른 점이라면...

absolute는 본래 태그가 있던 위치에 공간값을 가지지 않는 반면

relative는 본래 태그가 있던 위치에 공간값을 가진다.

쉽게 말해...(쉽게 설명하기 힘들다.)

absolute 속성을 받은 태그가 레이어로 띄워지고서 다음 태그가 그 위치로 오게 되는 것이다.

z-index를 쓰지 않아도 두번째 블록이 첫번째 블록 위치로 올라오면서

첫번째 블록은 띄워진 블록(레이어)가 된다.

단, left,top,right,bottom값은 현재 브라우저에서 z-index값을 썼을 때처럼 잘못 구현되고 있다.

position:relative만을 썼을 땐...아무런 변화가 일어나지 않는다.

현재 자신의 공간값에 그대로 있기 때문이다.

left, top 값을 사용하면 absolute값을 쓸 때 처럼 레이어 형태로 구현이 되는데...

단, 두번째 블록은 첫번째 블록 원래 위치로 올라가지 않으며, 두 블록 모두 원래 자신의 공간값에 그대로 머물러 있다.

absolute = 절대적

relative = 상대적 의 차이란 저런 것이다.

position속성을 가장 쉽게 응용 할 수 있는 것이라면

보통...사이트의 상단메뉴같은 것을 구성할 때...

위와 같이 "하위메뉴"레이어를 띄우려...position:absolute에 left,top값을 모두 입력해주는데...

그러지 말고...

상위메뉴이미지나 링크에 <BR>한번만 쓰고

레이어에는 position:absolute값만 써주면 일일히 left, top을 포토샵에 계산하는 불편이 줄어든다.

relative속성을 가장 쉽게 응용하는 것이 있다면

가끔...이런저런 이유로 이쪽에 있던 컨텐츠를 조금 다른 쪽에 위치시켜줘야할때가 있다.

아래와 같이...

원래 코딩된 것...

 

밑줄 아래에도 여러 컨텐츠로 구성되어 있었지만...다행히...Select Box가 들어갈 여유공간이 있어서 position:relative;top:47px만 쓰고 바꿀 수 있었다.

반대의 경우라면 top:-47px;로 해줘도 된다.
(offset의 속성값이 left, top, right, bottom값이 있지만

이상하게 아직까지도 브라우저에서 지원하지 않는다. 원래 마이너스 값은 사용하지 못하게 되어 있지만...right, bottom값이 지원하지 않는한...마이너스값을 써줘야한다.)