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와 상관없이 모두 겹치므로, 약간의 차이를 둿음. |