代碼解析：
1、表格標簽設置相對定位代碼，塊區標簽中設置絕對定位代碼；
2、移動標簽的規格應與相片的規格相同；
3、塊區標簽的規格應與相框的規格相同；
4、相片定位的參考點是它自身的正常位置，也就是在瀏覽器窗口上邊緣的正中央向左208px處（因為表格的寬度為416px），相框定位的參考點是表格的左上角。 5、要把相片的上部在相框中顯示出來，相片就得下降一個相框上邊框的高度。經測試，這個高度大約為98px，因此，塊區標簽中的居上數值確定為-98px（也就是相框的居上數值）。這就把相框向上移動了98px。也就是把相片向下移動了98px。
6、塊區標簽中的居上數值確定為－98 px以后，相片正好放到相框中了。但是，整個相框和相片的位置有點兒偏高，其原因就是因為相框上移了98px，所以，表格標簽中的居上數值（也就是相片的居上數值）我們把它設置為98px。
加大移動標簽的寬度，可以觀察上下邊框的高度值，還可以觀察相片在相框中的顯示效果；
7、修改表格標簽中相對定位的居左數值與居上數值，相片與相框會同時向同一個方向移動，它們的相對位置卻始終保持不變。
效果：
三、相框中放入移動相片：（相對定位）
代碼：
<div align="center">
<table style="border-color: rgb(0, 200, 0); left: 0px; top: 98px; width: 416px; height: 479px;
position: relative;" id="table1" border="0">
<tbody>
<tr>
<td>
<marquee height="479" width="416" scrollAmount="3">
<img border="0" src=
http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg
width="416" height="479"><img border="0"
src=
http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg
width="416" height="479"><img border="0"
src="
width="416" height="479"><img border="0"
src=
http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg
width="416" height="479">
</marquee>
<div style="left: 0px; top: -577px; position: relative;" class="divBorderStyleRelative"
width="435" height="675"><img style="left: 0px; top: 0px;"
src=
http://image27.360doc.com/DownloadImg/2011/04/2021/11089478_25.gif
width="435" height="675"></div>
</td></tr></tbody></table></div>
代碼解析：
１、表格標簽與塊區標簽中都應用了相對定位的css樣式，它們定位的參考點都是自身的正常位置。換句話來說，相片定位的參考點在瀏覽器窗口上邊緣的正中央向左208px處，相框定位的參考點在相片下方479px相片的左下角處。
２、因為相框的上邊框大約為98px，相框的高度為675px，所以，相框的居上數值應該設置為：－577px（因為675－98=577）。也就是說，相框上移577px以后，相框上邊框的下邊緣就與相片的上邊緣處于同一位置了。
３、相框上移577px以后,相框的上邊緣就會超出“相片定位的參考點”（也就是瀏覽器窗口上邊緣）98px，因此，相片的居上數值應該設置為：相框的居上數值應該設置為：98px。
４、因為相片是移動的相片，所以相框的居左數值定位為0px或者-30px、-50px都關系不大。但是有一條原則，相片的寬度加上相框的居左數值（要加正值，不能加負值。），其和不能大于相框的寬度，否則，相片就超出相框的右邊框了（相框的左邊框的寬度大約為75px）。
效果：（略）（這里如果顯示出效果，文章發表以后，效果圖下面就會出現一大片空白區域，頁面不美觀，故略。）
四、相框中放入靜止相片：
代碼舉例：
<div align="center">
<table style="border-color: rgb(0, 200, 0); left: 0px; top: 80px; width: 390px; height: 517px;
position: relative;" id="table1" border="0">
<tbody>
<tr>
<td>
<img border="0" src="
<div style="left: -70px; top: -80px; position: absolute;" class="divBorderStyle" height="680"
１、先設置一個居中的塊區，在塊區中設置一個一行一列的表格，表格標簽中要設置相對定位代碼。然后在單元格中粘貼一個要做為相片的圖片。再根據相片的規格設置（或者修改）表格的寬度與高度。
３、表格標簽中的“居左”與“居上”的數值，先設置為0px。這樣就把表格放置在了瀏覽器窗口的正中間。塊區標簽中的“居左”與“居上”的數值，也先設置為0px。然后估計一下“相框上邊框的高度”，修改塊區標簽中的“居上數值”，估計一下“相框左邊框的寬度”，修改塊區標簽中的“居左數值”。
４、要想知道“相框上邊框的高度”，可以這樣操作：先把相片的寬度加大，例如把相片的寬度修改為690px，相片的右部就超出相框的右邊框了。這時，就應該修改塊區標簽中的“居上”數值，把相片降下來。這個數值要修改為“負值”，相框就會向上移動，也就是把相片降下來了。當居上數值的最終結果修改為－80px的時候，相片的上邊緣就與相框上邊框的下邊緣平行了，這就說明相框的上邊框的高度大約為80px。
５、要想知道“相框左邊框的寬度”，可以這樣操作：先把相片的高度加大，例如把相片的高度修改為700px，相片的下部就超出相框的下邊框了。這時，就應該修改塊區標簽中的“居左”數值，把相框向左移動，使相片的左邊緣與相框左邊框的右邊緣對齊。這個數值也要修改為“負值”，相框就會向左移動，也就是把相片向右移動了。當居左數值的最終結果修改為－70px的時候，相片的左邊緣就與相框左邊框的右邊緣對齊了，這就說明相框的左邊框的寬度大約為70px。
6、把相片的規格恢復到“原來的”數值width="390" height="517"，點擊“發表”按鈕看看效果。相片完整地在相框中顯示出來了，而且相片的周圍也沒有任何空隙，正合適。但是，整個圖片的位置有點兒高，超過瀏覽器窗口的上邊緣了。這時，應該再修改一下表格中的“居上”數值。前面我們不是把塊區標簽中的“居上”數值修改為－80px了嗎，那么，現在就把表格標簽中的居上數值修改為80px。再看看顯示效果吧，完全合適了。
7、總之，一條總原則，要調整相片在相框中的左右位置，就修改相框所在塊區中的“居左”數值；要調整相片在相框中的上下位置，就修改相框所在塊區中的“居上”數值；要調整相片在相框中的顯示大小，就修改相框的規格與相片的規格。
