Position Property
../

웹 작성자의 오랜 고민중에 하나가 정확한 위치로 페이지의 구성을 하는것 이었습니다. 이것을 위해서는 투명이미지 같은 것으로 웹 브라우저에 따른 보정을 하여 작성했습니다. 그럼에도 불구하고 만족할 만한 대안은 없었습니다. position 으로 이것이 가능합니다. 지정하는 위치에 문서의 특정 요소를 배치할 수 있습니다. 그리고 이런 배치를 이중으로 배치할 수 있고 이미지 위에 글자를 올려놓을 수도 있습니다. script로 이들의 보여주고 감추고 이동시키고 등의 다양한 효과를 낼수도 있습니다. 정확한 페이지를 출력할 수 있는 CSS의 강력한 기능중의 하나입니다.

위치를 지정할 수 있는 것은 글자, 문단, 이미지, form, Applet, Plug-in등 모든 것입니다. 근데, W3C 문서에는 모든 택에 지정할 수 있다고 하지만 브라우저에 따라서 지정할 수 있는 택의 종류가 제한적이고 서로 다른 종류의 택을 사용합니다. nn4, ie4의 두 브라우저에는 아래의 택을 사용할 수 있습니다.

ie4에서 사용할 수 있는 택입니다.

APPLET BUTTON DIV EMBED FIELDSET HR IFRAME IMG INPUT MARQUEE OBJECT SELECT SPAN TABLE TEXTAREA

nn4에서 사용할 수 있는 택입니다.

ADDRESS B BIG BLOCKQUOTE CENTER CITE CODE DIR DIV DL EM FONT H1 H2 H3 H4 H5 H6 I KBD MENU OL P PRE S SAMP SMALL SPAN STRIKE STRONG SUB SUP TABLE TD TH TT U UL (A는 좌표는 지정되나 링크가 작동하지 않음.)

ie4와 nn4가 서로 다른 택에 position을 지정할 수 있습니다. 각 브라우저가 지원하지 않는 택에 position을 지정하기 위해서는 지원하지 않는 택을 같이 지원하는 택 안에 넣어주면 됩니다. 위의 공통으로 사용가능한 <DIV>, <SPAN>은 HTML4.0에 추가된 택으로 <B> 처럼 글자를 굵게하는 택 자체의 기능이 없는 다른 택을 여러개 포함할 수 있는 택입니다. <DIV>는 block 택으로 <SPAN>은 inline 택으로 사용됩니다.

이 2개의 택에 다른 택을 넣고 2개의 택에 style을 지정하면 position 뿐만이 아니고 모든 style을 지정할 수 있습니다. 그래서 style을 사용하기 위해서는 <DIV>, <SPAN> 2개의 택만으로도 전체 페이지를 만들수가 있습니다.

nn4에서는 <IMG>택에 지정할 수 없으므로 같이 지원하는 <SPAN> 택에 넣어주면 됩니다. 

<SPAN style="position: absolute; left:10px; top:10px"><IMG src="image.gif"></SPAN>

position 요소와 같이 사용해야 하는 요소는 z-index, top, right, bottom, left 입니다. position 요소는 기본적으로 block, inline 같은 모든 택에게 지정할 수 있기 때문에 position을 지정하고 visibility, clip, background, width 같은 요소를 같이 지정하여 더 재미있는 것을 만들 수 있습니다.

z-index를 사용하여 여러층으로 구현할 수 있고 visibility로 감추고 보이고할 수 있고 JavaScript를 사용하여 좌표, z-index 층, visibility로 보이고 감추고 등의 DHTML 기능을 낼 수 있습니다.


position 요소에 지정할 수 있는 값은 아래의 4가지입니다.


static

기본값으로 페이지를 작성한 위치에 위치합니다. 이것을 지정시 left, top는 듣지 않습니다.

relative

static과 비슷하게 작성한 위치에 있지만 left, top으로 작성한 위치에서 좌표를 지정할 수 있습니다. 
span { position: relative; top: -10px }
로 하면 SPAN 택을 10px 만큼 위로 이동시킵니다. 그래서 줄에서 약간 위로 올라온 글이 됩니다. 좌표를 지정한 택의 내용은 페이지 본문 위에 옵니다. 그래서, 밑에 있는 다른 내용이 보이지 않을 수 있기 때문에 알맞은 좌표값을 지정해야 합니다.

absolute

절대 좌표로 위치 시킵니다. 자신의 상위의 왼쪽 위 꼭지점이 left:0px, top:0px의 좌표입니다. 
#abs { position: absolute; left:200px; top:100px }
로 지정하면 "#abs" ID 속성을 지정한 택은 페이지 오른쪽으로 200px 아래로 100px만큼 이동하여 위치합니다.

position: absolute;를 지정한 택의 좌표값은 상위 안에서 위치합니다. 다른 css 요소의 상위와는 다르게 position: absolute;나 position: relative; 를 지정한 택만이 상위가 됩니다. 이 상위에서 부터 좌표값을 지정합니다. 만약, position: absolute;나 position: relative; 를 지정한 택이 상위에 없다면 상위는 페이지, 즉 BODY가 됩니다. 

<HTML>
<HEAD>
<TITLE>position에서의 좌표 이해</TITLE>
</HEAD>
<BODY>
  <DIV id="div1">
    <P id="p1">p1 택의 내용입니다..
       <SPAN id="span1">span1 택의 내용 입니다.</SPAN>
    </P>
  </DIV>
</BODY>
</HTML>
위의 예에서 id="span1" 으로 "span1"이라는 이름을 가지고 있는 <SPAN> 택의 상위는 "p1" 입니다. 
#span1 { position: absolute; left: 100px; top: 100px }
"span1" 이름의 id를 가지고 있는 <SPAN> 택에게 position:absolute; 를 지정했습니다. 그래서 상위에서 position:absolute 나 position:relative; 를 지정한 택이 있다면 그것이 <SPAN>의 상위가 됩니다. position:static은 상위가 되지 않습니다.

<SPAN>위의 <P>나 <DIV>가 position:absolute 나 position:relative;이 없기 때문에 <SPAN> 의 상위는 페이지 즉, body가 됩니다. 그래서 "span1 택의 내용 입니다." 가 페이지에서 left:100px; top:100px;의 위치에서 시작합니다. 

#div1 { position: absolute; left: 50px; top: 50px }
#span1 { position: absolute; left: 100px; top: 100px }
style을 위와 같이 span1과 div1 에게 모두 지정하면 이제 <SPAN> 택의 상위는 id="div1" <DIV> 택이 됩니다. 즉, span1 은 "div1" <DIV> 택안에서 left:100px, top:100px 의 좌표에 위치합니다. 그래서 페이지 전체에서 보면 상위 "div1" 의 left:50px, top:50px 와 함께 실제 페이지에서는 left:150px, top:150px 에서 보이게 됩니다.

다른 값과는 다르게 이 값을 지정하면 페이지의 공간을 확보하지 않아서 다른 내용의 위에 위치합니다. 그래서 밑이 내용이 보이지 않을 수 있습니다. 좌표값을 알맞게 지정해야 합니다.

fixed

프레임 페이지처럼 페이지 scroll에 상관없이 고정시킵니다. nn4, ie4에서 지원하지 않습니다. 

#fix { position: fixed; left:50%; top: 0px }
로 하면 수평으로 페이지 절반, 가장 위에 위치 시킵니다. 그리고 페이지 scroll bar로 페이지를 움직여도 이것은 움직이지 않고 고정되어 있습니다.

position과 margin, float

position을 지정한 택에도 border, padding 그리고 상위와의 거리를 두는 margin 값이 듣기 때문에 이들의 값도 좌표값에 더해집니다. 
#D1 { position:absolute; margin-left:100; top:0; left:100; }
으로 하면 200px의 위치에 있습니다. 하나의 택에는 잘 작동하지만 position을 지정한 택이 position을 지정한 택을 가지고 있을 때, nn4에서 상위의 margin 값이 하위에게 듣지 않습니다. 
#D1 { position:relative; margin-left:50%}
#D2 { position:absolute; left:50px; }

<div id=D1>D1
	<div id=D2>
		D2
	</div>
</div>
로 하면 상위 "D1" ID를 가진 div 택은 페이지 넓이 절반의 좌표로 이동하고 하위 div인 "D2" 가 절반에서 오른쪽으로 50px만큼 더 이동합니다. 하지만, nn4에서는 상위의 margin이 듣지 않습니다. 그래서 넓이가 400px 크기의 페이지라면 ie4에서는 D2가 left 좌표 250px에 있고 nn4는 50px에 있습니다.

그리고 position과 float를 같이 지정시 다른 값은 float가 듣지만 position:absolute; 를 지정하면 float는 듣지 않습니다. 오로지 자신의 좌표값으로만 위치합니다.

nn4에서 창 크기 변경

nn4에서 position을 지정한 페이지를 창의 크기를 변경하면 잘못된 형식으로 나옵니다. 

window.onmove = new Function("setTimeout('self.location.reload()', 2000)")
나 
window.onresize = new Function("setTimeout('self.location.reload()', 2000)")
의 JavaScript 코드를 넣어주면 원래의 구성을 복구 합니다. onresize 이벤트는 페이지의 크기에 따라서 오작동하는 경우가 있기 때문에 onmove 이벤트가 안전합니다.

Tip 1

position:absolute; 를 지정하고 left, top을 기본값인 'auto'를 지정하면 ie4에서는 작성한 위치에 위치하고 nn4는 0px로 지정합니다. left, top을 아예 지정하지 않으면 'auto'로 작동하지 않고 두 브라우저에서 position: relative; 를 지정한 것과 비슷한 작동을 합니다. 
#D1 { position: absolute; }
left, top을 지정하지 않고 position:absolute; 만 지정하면 페이지에서 상대적인 배치가 됩니다. 그래서 position: relative; 로 지정한 것과 같은 좌표로 나옵니다. 다만, absolute는 다른 본문의 내용의 위에 옵니다. 이것은 <br> 로 적당히 조절을 하면 됩니다.

이것의 좋은점은 nn4같은 경우 position: relative; 를 지정한 css-p는 mouseover, mouseout 같은 이벤트가 듣지않는 JavaScript 버그가 있는데 position: absolute로 이벤트를 지정할 수 있고 상대적인 배치를 하기 때문에 다른 페이지의 본문과 알맞은 위치로 css-p의 배치할 수 있습니다.


T O P