CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기

relative는 parent element를 기준으로 상태 위치로 지정하는 방법이고
absoulte는 절대 위치로 지정하는 방법인데 이를 하게되면 child element가 아닌 절대위치를 가진 element가 되기때문에 floating과 상관없이 해당 element는 붕 떠있는 상태가 된다.
(1) parent element에는 아무값을 주지 않고 본인 스스로 relative를 줘도 되지만 이럴경우 자기 자신이 parent에 속해져 있는 상태가 되기 때문에 자신의 width 혹은 height만큼 parent element도 영향을 받게 된다.

(2) 하지만 parent element를 relative를 주고 child element를 absolute를 주게 되면 parent를 기준으로한 절대위치가 된다. 

물런
간단히 예를 들어 보자
HTML 코드는 아래와 같다

<div id=”parent_element”>
Parent Element
<div id=”child_element”>Child Element Line number #1 <br />Child Element Line number #2 <br/>Child Element Line number #3 </div>
</div>
<div id=”absolute_element”>Absolute Element</div>

absolute만 사용할 경우의 CSS는 이렇다. (1번)

#parent_element {margin:50px;background:pink;}
#child_element {position:relative;top:50px;left:50px;background:yellow}
#absolute_element {position:absolute;top:10px;left:10px;background:orange;}

이 CSS를 적용한 후 브라우저에서 확인을 하면 아래와 같이 된다.

parent element를 relative를 주고 child element에 absolute를 줄경우의 CSS는

#parent_element {position:relative;margin:50px;background:pink;}
#child_element {position:absolute;top:50px;left:50px;background:yellow}
#absolute_element {position:absolute;top:10px;left:10px;background:orange;}

브라우저에서 확인을 하면

와 같이 parent element 와는 독립적인 상태가 된다.

꼭 후자것이 좋은건 아니다. 상황에 따라 알맞는것을 사용하면 된다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중