회원가입아이디/비번찾기
홈으로

Position 상세 설명
13년 전
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
relative
absolute
fixed

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의 배치할 수 있습니다.
추천추천 : 375 추천 목록
번호 제목
2,885
input 입력 필드 앞뒤 공백 실시간 제거
2,884
Placeholder 포커스시 감추기
2,883
MySQL 중복된 데이터를 삭제
2,882
MySQL 중복 데이터 확인
2,881
sessionStorage.getItem 와 sessionStorage.setItem
2,880
제이쿼리 랜덤으로 배경색 변경
2,879
preg match에 관한 정규식
2,878
Stream an audio file with MediaPlayer 오디오 파일 스트리밍 하기
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER 환경 변수 정리
2,875
Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기
2,874
iframe 사용시 하단에 발생하는 공백 제거방법
2,873
아이프레임(iframe) 전체화면 가능하게 하기
2,872
부트스트랩(bootstrapk)에서 사용하는 class명 정리
2,871
부트스트랩 CSS
2,870
크롬에서 마진 조절
2,869
PHP 현재 페이지의 도메인명이나 url등의 정보 알아오기
2,868
PHP preg match all()
2,867
PHP 로 웹페이지 긁어오기 모든 방법 총정리!
2,866
[PHP] 원격지 파일 주소 노출 안하고 curl로 다운로드 받기
2,865
PHP 함수 정리
2,864
아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법
2,863
PHP 배열에서 무작위로 하나 뽑아주는 array rand() 함수
2,862
PHP 정규식 정리
2,861
PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
2,860
php 크롤링 또는 파싱 함수, 정규식 모음
2,859
제이쿼리 기본 명령어
2,858
웹페이지 가로 모드세로 모드 인식하기
2,857
모바일 웹 화면 강제 회전(가로모드 고정)
2,856
[HTML5]에서 frameset 대체 방법과 iframe 속성
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright ⓒ musictrot All rights reserved.