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>
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;}
#child_element {position:relative;top:50px;left:50px;background:yellow}
#absolute_element {position:absolute;top:10px;left:10px;background:orange;}
이 CSS를 적용한 후 브라우저에서 확인을 하면 아래와 같이 된다.
테이블에 버튼 두개를 나란히 뿌려주고자 할때
<tr><td>안에 그냥 버튼을 뿌려줄수도 있지만
위치가 맘에 안들면
<div>를 이용해서 원하는곳을 직접 지정해 줄수 있다.
두가지 방법이 있는데
하나는
<div style="position:relative; top:0px; left:0px; width:340px;"> position을 relative로 줬을때와
<div style="position:
효과는 비슷하지만 absolute는 화면변화에 민감해서 일일이 지정을 해줘야되는거 같다.
두가지의 예는.
<td width=140><div id="mail" name="mail" style="position:
<td width=300><div style="position:
이런식과
<td colspan="2">
<div style="position:relative; top:0px; left:0px; width:340px;">
<div style="position:relative; float:left; top:0px; height:24px; margin-left:2px; margin-top:0px; margin-right:5px;">버튼..</div>
<div style="position:relative; float:left; top:0px; height:24px; margin-left:1px; margin-top:0px; margin-right:10px;">버튼</div>
</div>
</td>
밑의 div는 겉의 div width길이 만큼 align을 left로 줬기 때문에 가로로 붙어서 나온다.
width가 꽉차면 그때 다음줄로 나온다.
