網(wǎng)站建設中元素絕對定位時(shí)，如果除bottom外某個(gè)任意偏移屬性設置為auto，會(huì )有一種特殊的行為。下面以top為例，考慮以下標記：

<p>

When we consider Che effect of positioning, it quickly becomes clear that authors

can do a great deal of damage to layout, just as they can do very interesting

things.<span style="position.: absolute; top: auto; left: 0;">[4]</span> This is usually the case with useful technologies: the sword always has at least two edges, both of them sharp.

</P>

會(huì )發(fā)生什么呢？對于left，很簡(jiǎn)單：元素的左邊界會(huì )相對于其包含塊的左邊界放置（可以假設其包含塊是初始包含塊）。不過(guò)，對于top，還會(huì )發(fā)生一些更有意思的事情。定位元素的頂端要相對于其未定位前本來(lái)的頂端位置對齊。換句話(huà)說(shuō)，假設網(wǎng)頁(yè)設計人員span的 position值為static，想象一下它會(huì )放在哪里，這就是其靜態(tài)位置，也就是計算出的其頂邊應在的位置。CSS2.1這樣描述：

……（元素的）“靜態(tài)位置”一詞大致含義是：元素在正常流中原本的位置。更確切地講，“頂端”的錚態(tài)位置是從包含塊的上邊界到假想框的上外邊距邊界之間的距離（假想框是假設元素“position”屬性為“static”時(shí)元素的第一個(gè)框）。如果這個(gè)假想的元素框在包含塊的上面，則這個(gè)值為負。

因此，可以得到如圖10-42所示的結果，

圖10-42：絕對定位一個(gè)元素，與其“靜態(tài)”位置一致

“[4]”位于段落內容之外，因為初始包含塊的左邊界在該段落左邊界的左邊。

如果left和right設置為auto，也適用同樣的基本規則。在這些情況下，定位元素的左（或右）邊界與元素未定位時(shí)該邊界原本的位置對齊。下面修改前面的例子，使top 和left都設置為auto:

<P>

When we consider the effect of positioning, it quickly becomes clear that

can. do a great deal of damage to layout, just as they can do very interesting

things.<span style="position: absolute; top: auto; left: auto;">[4]</span> This is usually the case with useful technologies: the sword always has at least two edges, both of them sharp.

</P>

圖10-43：絕對定位一個(gè)元素，與其“靜態(tài)”位置一致

“[4]”現在就位于其本來(lái)位置（即未定位前的位置）。注意，由于它已經(jīng)定位，其正常流空間關(guān)閉。這會(huì )導致網(wǎng)站建設定位元素與正常流內容重疊。

注意：應該注意到，網(wǎng)站建設CSS2和CSS2.1都指出在這樣的情況下，*網(wǎng)頁(yè)設計者可以自由猜測可能的[靜態(tài)]位置。當前瀏覽器在這方面做得很好，會(huì )按要求處理top和left的auto值，使元素的位置與其在正常流中原本的位置一致。

這種自動(dòng)放置只在某些情況下可行，這些情況下通常對定位元素的其他尺寸沒(méi)有什么限制。前面的例子可以自動(dòng)放置，因為它對其高度或寬度沒(méi)有任何限制，對下邊界和右邊界的放置也沒(méi)有限制。不過(guò)，假設出于某種原因確實(shí)有這樣一些限制會(huì )怎么樣呢？請考慮以下標記：

<p>

When we consider the effect of positioning, it' quickly becomes clear that authors

can do a great deal of damage to layout, just as they can do very interesting

things.<span style="position: absolute; Copt auto; left: auto; right: 0; bottom: 0; height: 2em; width: 5em;">[4]</span> This is usually the case with

useful technologies: the sword always has at least two edges, both of them sharp.

</P>

此時(shí)無(wú)法滿(mǎn)足以上的全部值。要確定此時(shí)會(huì )發(fā)生什么，這是下一節要討論的問(wèn)題。