절대위치와 상대위치

레이어 테이블을 고정시키는 절대위치와상대위치에 대해서 테이블과 레이어의 관계는 좀 애매 합니다 예를 들어 테이블이나 이미지 등과 같은 것은 레이어 안으로 삽입하면 레이어에 종속이 됩니다만, 레이어를 테이블의 셀 <td>안에 삽입하면, 레이어의 기본속성 상 테이블과 무관하게 자리를 지킵니다. 드림위버나, 나모등을 사용해서 레이어를 끌어다가 임의의 위치에 삽입하면, 다음과 같이 소스코드가 생성됩니다. 예를 들어 드림위버에서 레이어를 삽입하면, <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; ) 잡아 둔 것이 보일겁니다. 해당 테이블 셀의 좌상단을 기준으로 하는 것이되지요.