포지션은 레이어의 위치 선정을 위한 것입니다.
여기에서 절대적인(absolute) 위치냐 아니면 상위 객체에 대한 상대적인(relative) 위치냐를 정합니다.
넷츠케이프 네비게션과 인터넷 익스플로러 기준이며 CSS레벨
속성별 Property에 따라 그 이상의 버전일 수도 있습니다.
[position]
객체의 위치를 화면에 설정 합니다.
N:4.0/IE:4.0/CSS2
문법
HTML {position: Property} JScript object.style.position = 'Property'
Property
static : 기본값, 기본적으로 설정 되는 값입니다. (top / left 적용 되지 않습니다.)
absolute(절대적) : 브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에 있다면 그 곳을 기준으로 합니다.
relative(상대적) : 객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상대값을 정해 줍니다.
fixed : relative의 하위 범주에 속하며, 다른 점은 화면이 스크롤 되어도 움직이지 않습니다.
예제
<head> <style type="text/css"> <!-- .pos1 {color: blue; position:<x> absolute; top: 150; left: 300} .pos2 {color: red; position: static} .pos3 {color: green; position: relative; top: -10; left: 300} --> </style> </head> .......... <span class=pos1>■</span> <span class=pos2>■</span> <span class=pos3>■</span>
----------------------absolute(■)는 이곳을 기준으로 합니다.----------------------
■ ■ ■
빨간 박스는 static : 원 태그 위치에 그대로 보입니다.(position 미적용)
파란 박스는 absolute: 브라우저의 최 상단기준이나 문서내 최상단(파란 기준선)에서 top: 150; left: 300
그린 박스는 relative : 태그내 마지막 위치는 빨간 박스이므로 그곳을 기준으로 top: -10; left: 300
파란 박스 본 게시판에서 absolute를 적용할 수 없어 위치가 다릅니다.
소스 복사해서 결과 확인 하세요!!
출처:네이버지식인