置放考量

要套用於元素的位置類型會視內容的版面配置及網頁的用途而定。相對位置會視文件的預設流程而定,當使用者重新調整瀏覽器大小時,則會重新安排內容流程。固定位置與瀏覽器視窗具有直接的關係,而且會在瀏覽器視窗的大小經過調整時重新安排流程。不過,不論使用者是否重新調整瀏覽器的大小,絕對位置都會精確放置影像和文字的位置。

使不同的位置類型成為巢狀

下列程式碼範例示範在相對定位的元素內使絕對定位的元素成為巢狀的概念。預期的效果是使矩形中的文字置中。在過去,您可能曾經使用讓表格儲存格中的內容置中的表格和屬性,不過,這個版面配置僅限於靜態表格。使用位置屬性後,您便能夠在較大的版面配置中處理這類內容,而且此後也可以加入指令碼,例如使這些元素個別產生動畫效果的程式碼,以便在使用者載入網頁時,使元素從文件外的某處到達定位。

<html>
<head><title>Center the div</title>
<script language="Jscript">
function doPosition() {
two.style.top = document.all.one.offsetHeight/2 - 
two.offsetHeight/2;
two.style.left = document.all.one.offsetWidth/2 - 
two.offsetWidth/2;
}
</script>
</head><body onload="doPosition()">
<p>Some text in the beginning.</p>
<div id="one" 
    style="position: relative; top: 10px; 
    height: 200px; width: 200px; 
    background-color: green;">Some text in the outer div
    <div id="two" style="position: absolute;
       left: 50px; width: 100px; border :red 2px solid;
       color: red;">text in the inner div - color should be red
    </div>
<div>
</body>
</html>

在此範例中,外部 DIV 元素的流程與網頁的內容相同,因為該元素緊接在第一段之後的 10 像素處。內部 DIV 元素具有初始的絕對位置,但是載入文件時, doPosition 指令碼函數會修改此位置。 offsetWidthoffsetHeight 屬性則可用來計算新的元素絕對位置。

另請參閱

概念

關於元素置放
什麼是置放?
絕對位置
固定位置