[CSS] position:relative 속성 예제

relative

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

【기본예제】

</body>

기본예제

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

【좌표지정】

※ body 생략

좌표지정

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

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

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

※ body 생략

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

<br>

결과는?

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

※ 기준이되는 위치가 '결과는?' 으로 변경 됩니다. 변경 된 기준 위치에서부터 아래로 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 값의 특징에 대하여 알아 보았습니다.

저작자표시 비영리 변경금지

'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글

CSS hover 효과를 이용한 심플 가로 메뉴 만들기 (12)	2018.04.06
[CSS] position:absolute 속성 예제 (0)	2018.03.28
CSS Position 속성 이해하기 (1)	2018.03.22
CSS를 이용한 DIV 슬라이드 효과 주기 (12)	2018.03.13
jQuery를 이용한 스크롤 이동하기 구현 방법 (2)	2018.02.24