개체를 위치시키는 방식을 반환하거나 설정한다.
| static | 디폴트이며, 개체는 특별히 위치시키는 방식이 지정되지 않았다. |
| absolute | 개체가 모체 엘레멘트나, top과 left 속성을 사용하여, 모체가 위치시켜지지 않았으면, body 개체에 상대적인 위치인 절대적인 지점으로 위치시켜진다. |
| relative | 개체가 정상 흐름으로 위치되고, top과 left 속성에 대한 차이(offset)에 의하여 위치된다. |
이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 static이다.
CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.
이 속성값을 absolute로 설정하면, 주위 개체의 배치나 위치에 관계없이 문서의 흐름에서 개체를 뽑아낸다. 만일 지정된 위치에 다른 개체들이 있으면, 그 개체들에 영향을 주지않고, 위치시켜지는 개체를 같은 위치에 나타나게 하여 겹처지게한다. 겹쳐지는 부분에 대한 보임성 제어는 z-index 애트리뷰트나 속성을 사용한다. 절대적으로 배치된 개체는 마진을 갖고 있지 않으나 테두리(border)와 패딩은 갖는다.
개체에서 absolute 속성을 사용하려면 최소한 top, bottom, left나 right 속성들 중에 한가지 값을 설정하고 position 속성을 absolute로 설정하여야 한다. 지정하지 않으면, 이들 위치시키는 속성들은 absolute의 디폴트 값을 사용하므로, HTML 배치 규칙에땨라 바로 이전 개체의 바로 뒤에 위치된다.
마우스와 같은 입력창치로부터의 입력은, 엘레멘트가 보이더라도 겹처진 개체를 통하여 읽지 못한다. 이는 다음의 경우가 아니면 음수 z-index를 갖는 위치된 개체에서도 또한 마찬가지이다.
이 속성을 relative로 설정하면 개체를 문서의 자연적인 HTML 흐름으로 위치시키지만, 차이(offset) 위치는 이전 내용의 개체에 기준한다. 다음 문법은 span에 위첨자를 생성하는 것을 보여준다.
위첨자 supcript 는 정상흐름에서 5 픽셀 위에 디스플레이되었다.
<P>위첨자 <SPAN style="position:relative;top:-5px;color:blue">supcript </SPAN>는 정상흐름에서 5 픽셀 위에 디스플레이되었다.</P>
상대적으로 위치된 개체 다음에 나오는 relative 위치로 position되는 개체와 텍스트는 자체의 공간을 차지하고 자연적인 배치에 겹쳐서 위치되지 않는다. 반면, absolute로 위치된 개체 다음의 개체와 텍스트는 이미 자연적으로 배치된 위치된 개체의 흐름에서 빠지기 전의 공간을 점령한다. 절대위치로 위치된 개체가보여지는 지역들 벋어면 스크로바가 생긴다. 그러나 상대적으로 위치된 개체의 경우는 보이는 지역들 벋어나도 스크롤바는 생기지 않는다.
내용의 크기는 배치에서 개체의 크기를 결정한다. 예를들어 height와 position 속성이 div 개체에 설정되었으면 배치(layout)를 제공한다. div의 내용은 그 크기를 결정한다. 이 경우 내용은 width의 크기를 결정한다.
| 개체 | script | CSS | IE 버전 |
|---|
이 속성은 CSS2(Cascading Style Sheets Level 2)에 정의되었다.
P 문단 SPAN 문자열 다시 P문단 계속.
position 속성 단추를 클릭해 보라. absolute의 경우는 페이지 맨 위에 디스플레이된다.
<STYLE>.positionClass { position: static;top:10;left:10;border:solid 1 red;background:fdd;padding:5;position:relative;}</STYLE>
<SCRIPT>
function showAll(pos){
spanObj.style.position=showA.innerHTML=pos;
}
</SCRIPT>
<P id="pObj" style="border:solid 1 blue;background-color:ffa;padding:5">P 문단
<SPAN id=spanObj class="positionClass">SPAN 문자열</SPAN> 다시 P문단 계속.</P><BR>
<BUTTON onclick="showAll('relative')">relative</BUTTON>
<BUTTON onclick="showAll('absolute')">absolute</BUTTON>
<BUTTON onclick="showAll('static')">static</BUTTON>
<DIV>spanObj.style.position=<SPAN id=showA style="color:blue">auto</SPAN><BR>
spanObj.currentStyle.top=<SCRIPT>document.write(spanObj.currentStyle.top)</SCRIPT><BR>
spanObj.currentStyle.left=<SCRIPT>document.write(spanObj.currentStyle.left)</SCRIPT></DIV>