網(wǎng)站建設中非替換元素和替換元素的定位規則大不相同。這是因為替換元素有固有的高度和寬度，因此其大小不會(huì )改變，除非創(chuàng )作人員有意顯式地修改。因此，在替換元素定位中沒(méi)有“恰當收放”行為的概念。

確定替換元素位置和大小時(shí)，所涉及的行為用以下規則描述最為容易，這組規則按順序分別：

如果width設置為auto，width的實(shí)際使用值由元素內容的固有寬度決定。因此，如果一個(gè)圖像的寬度是50像素，使用值則計算為50px。如果網(wǎng)站建設顯式聲明了width （也就是說(shuō)，設置為100px或50%），則width設置為該值。

在從左向右讀的語(yǔ)言中，如果left值為auto，要把auto替換為靜態(tài)位置。在從右向左讀的語(yǔ)言中，則把right的auto值替換為靜態(tài)位置。

如果left或right仍為auto（也就是說(shuō)，未在上一步中被替換），則將margin-left 或margin-right的auto值替換為0。

如果此時(shí)margin-left和margin-right都還定義為auto，則把它們設置為相等的值，從而將元素在其包含塊中居中。

在此之后，如果只剰下一個(gè)auto值，則將其修改為等于等式的余下部分（使等式滿(mǎn)足）。

這與非替換元素絕對定位時(shí)的基本行為相同（只要假設非替換元素有一個(gè)顯式的寬度）。因此，下面兩個(gè)元素會(huì )有相同的寬度和位置，假設圖像的固有寬度是100像素（見(jiàn)圖10-50）:

<div style="width: 200px; height: 50px; border: 1px dotted gray;">

<img src="frown.gif" alt="a frowny face" style='position: absolute; Cop: 0; left: 50px; margin: 0;">

<div style="position: absolute; top: 0; left: 50px; width: lOOpx; height: 100px; margin: 0;"> it's a div!

</div>

</div>

圖10-50：絕對定位一個(gè)替換元素

與非替換元素一樣，如果值過(guò)度受限，網(wǎng)頁(yè)設計員就會(huì )忽略right的值（對于從左向右讀的語(yǔ)言），而在從右向左讀的語(yǔ)言中會(huì )忽略left的值。因此，在以下例子中，right的聲明值會(huì )被計算值50px覆蓋：

<div style="position: relative; width: 300px;">

<img src="frown.gif" alt="a frowny face"

Style="position: absolute; top: 0; left: 50px; right: 125px; width: 200px; margin: 0;">

類(lèi)似地，沿垂直軸的布局受以下一坦規則控制：

如果網(wǎng)頁(yè)設計height設置為auto, height的計算值由元素內容的固有高度確定。因此，對于一個(gè)50像素高的圖像，其height計算為50px。如果height顯式聲明為某個(gè)值（如lOOpx或50W，則height會(huì )設置為該值。

如果top的值為auto，將其替換為替換元素的靜態(tài)位置。

如果bottom的值為auto，將margin-top或margin-bottom的所有auto值替換為0。

如果此時(shí)margin-top和margin-bottom都還定義為auto，將其設置為相等的值，從而使元素在其包含塊中居中。

在此之后，如果網(wǎng)頁(yè)設計僅剩下一個(gè)auto值，則將其修改為等于等式中的余下部分（使等式滿(mǎn)足）。

與非替換元素一樣，如果值過(guò)度受限，網(wǎng)頁(yè)設計員會(huì )忽略bottom。

因此，以下標記會(huì )得到如圖10-51所示的結果：

<div style="position: relative; height: 200px; width: 200px; border: 1px solid;"><img src="one.gi￡' alt="one" widths"25" heights"25" style="position: absolute; top: 0; left: 0.; margin: 0;">

<img src="two.gif" alt=.two" width="25' style="position: absolute; top: 0; left: 60px; margin: 10px 0; bottom: 4377px;">

<img src="three.gif alt=" three- heights"25" style="posxtion: absolute; left: 0; width: lOOpx; margin: 10px; bottom: 0;">

<img src="four.gif_ alc=" four" style="position: absolute; top: 0; height: lOOpx; right: 0; width: 50px;">

<img src="five.gif" alt="five" style:"position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;">