relative

 

예제로를 통하여 position:relative 속성에 대하여 알아보도록 하겠습니다.

 

【기본예제】

<body style="margin:0;padding:0;">

  <div style="position:relative; background-color:00D8FF;">기본예제</div>

</body>

 

기본예제

 

※ width 설정을 하지 않을 경우 자동으로 100% 로 설정 됩니다.

 


 

 

【좌표지정】

※ body 생략

<div style="position:relative; top:20px; left:20px; background-color:00D8FF;">기준 DIV</div>

 

좌표지정

 

※ 가로의 길이가 100%인 div가 오른쪽으로 20px로 이동하기 때문에 그만큼(20px)의 스크롤이 발생하게 됩니다.

 

※ 기본적으로(아무것도 없는 상태) 좌표지정의 기준은 <body> 최상단 좌측이 됩니다.

 


 

 

【텍스트가 자리 하고 있는 경우】

※ body 생략

텍스트 문구 등이 자리 하고 있습니다.

<br>

결과는?

<div style="position:relative; top:20px; left:20px; background-color:00D8FF;">기준 DIV</div>

 

텍스트가 자리 하고 있는 경우

 

※ 기준이되는 위치가  '결과는?' 으로 변경 됩니다. 변경 된 기준 위치에서부터 아래로 20px 떨어지게 됩니다. 

 


 

 

【relative 또는 static 값의 div가 위치 하고있는 경우】

<div style="position:relative; background-color:FFBB00;">relative DIV</div>
<div style="position:relative; top:20px; left:20px; background-color:00D8FF;">기준 DIV</div>

 

relative 또는 static 값의 div가 위치 하고있는 경우

 

※ relative 또는 static 속성의 div가 존재할 경우 해당 div가 기준위치가 됩니다.

   기준위치에서 top:20px, left:20px 위치에 자리하게 됩니다. 

 


 

 

【absolute 또는 fixed 값의 div가 위치 하고있는 경우】 

<div style="position:absolute; background-color:FFBB00;">relative DIV</div>
<div style="position:relative; top:20px; left:20px; background-color:00D8FF;">기준 DIV</div>

 

absolute 또는 fixed 값의 div가 위치 하고있는 경우

 

※ absolute 또는 fixed 값의 경우 기준위치에 영향을 미치지 않습니다.

위의 예제의 경우 기준위치는 body의 최상단이 됩니다.

 


 

 

【마무리

position속성의 relative 값은 body(doc)에서 자신의 영역을 가지고 있어 다른 div에게 영향을 미치고

가로의 값은 지정하지 않을 경우 100%로 설정 됩니다.

그리고 absolute 와 fixed는 자신의 영역을 가지고 있지 않아 relative의 위치에 영향을 미치지 않습니다. 

 

여기까지 예제를 통하여 position 속성의 relative 값의 특징에 대하여 알아 보았습니다.

Posted by JOY [바가지]

댓글을 달아 주세요

  1. Deborah 2018.03.24 05:51 신고  댓글주소  수정/삭제  댓글쓰기

    잘이해는 안되지만 도움이 필요한 분께는 좋은 정보네요

  2. 요니피그 2018.03.24 08:02 신고  댓글주소  수정/삭제  댓글쓰기

    넘 어렵네요ㅠ 전 정말 아는게 없는것같어요ㅠ

  3. 애플- 2018.03.24 17:44 신고  댓글주소  수정/삭제  댓글쓰기

    흠..... 독서실 끊어서 볼 계획입니다 ^^