position:relative, position:absolute

 

 

position:relative

 

<table style="background:black;">
<tr><td>

 

<div style="position:relative; left:0px; top:0px; width:200px; height:100px; background:red">relative, left0, top0</div>

<div style="position:relative; left:0px; top:0px; width:200px; height:100px; background:cyan">relative, left0, top0</div>

<div style="position:relative; left:25px; top:25px; width:200px; height:100px; background:green">relative, left0, top0</div>

 

</td></tr>
</table>

 

- relative의 경우,  일부러 bgcolor=black인 테이블안에 div를 넣어보았는데,    웹페이지의 시작이 아닌, div를 사용한 표안에서부터 left:0, top:0;이 적용됨  - 역시 하위 relative들도, 다른 div와 겹치는 것이 아닌 자신의 위치에서부터 left, top의 간격만큼 지정됨 - 녹색그림의 숫자 오타에요. 오른쪽 소스가 맞음 그림처럼 left0, top0하면 하늘색 바로 다음에 나오는데, 그림의 경우 하늘색에서 left25, top25띄운거에요, 소스는 맞는데 그림에 숫자가 틀렷네요^^;

 

 

 

 

position:absolute

<table style="background:black;">
<tr><td>

 

<div style="position:absolute; left:0px; top:0px; width:200px; height:100px; background:red">absolute, left0, top0</div>

<div style="position:absolute; left:25px; top:25px; width:200px; height:100px; background:cyan">absolute, left25, top25</div>

<div style="position:absolute; left:45px; top:45px; width:200px; height:100px; background:green">absolute, left45, top45</div>

</td></tr>
</table>

- absolute역시 bgcolor=black인 테이블안에 div를 넣어보았는데, 테이블과는 상관없이 웹화면 시작부터  left:0, top:0;이 적용됨  - 하위 position=absolute인 div가 left:0, top:0일 경우 먼저쓴 div와 상관없이 모두 겹치므로, 약간의 차이를 둿음.

 

[출처] position:relative 와 position:absolute 비교 테스트|작성자 바람냄새