레이어 스타일로 위치값 정하기

레이어를 삽입하면,  

<div id="Layer1" style="position:absolute; left:420px; top:273px; width:164px; height:104px; z-index:1"></div>

이 됩니다.  여기서 주목 하실 것은 style="... " 옵션 부분의 position:absolute;  입니다.
absolute가 절대위치를 뜻하므로 이것은 웹 브라우저내 페이지의 좌상단 구석(0,0)을 기준으로 레이어의 위치를 정합니다.
위에선 제가 마음대로 그냥 가져다 붙였으므로 left:420px; 는 왼쪽부터   420픽셀,  top:273px; 는 위에서부터 273픽셀 위치가 되는 것이지요.
그래서 이것을 절대좌표의 대상이 되는 웹페이지 좌상단을 기준으로 하지 않고, 테이블을 기준으로 하려면 일단 <div> 레이어를 테이블 셀<td>안쪽으로 복사 해넣습니다.

<table width="300" height="194" border="1" cellpadding="1" cellspacing="1">
  <tr>
    <td bgcolor="#999966">
<div id="Layer1" style="position:relative; left:0; top:0; width:100; height:100; z-index:0; visibility: inherit; background-color: #FFCCCC; layer-background-color: #FFCCCC; border: 1px none #000000;">내용</div>
   </td>
  </tr>
</table>

위와 같이 <div> 레이어를 테이블 셀안으로 삽입하고, style="position:relative;..... " 와 같이 절대위치를 상대 (r elative) 위치로 변경해준다면 이때 부터는 기준이 되는 좌표값은 테이블의 셀 <td>이안쪽</td>의 좌상단이 기준이 되므로 새로운 기준점 얻게 되는 것입니다.
여기선 그냥 테이블 셀의 0,0 픽셀위치로( left:0; top:0; ) 잡아 둔 것이 보일겁니다.
해당 테이블 셀의 좌상단을 기준으로 하는 것이되지요.