這篇文章繼續前面發起的關于自動定位的話題，先前在描述關于自動定位的一些基本信息之后，我留下了一些可能用在布局中的方法，現在是時候討論元素定位的改進問題了。

玩弄絕對定位元素于股掌之間

首先，回憶一下自動定位是如何觸發的，設置絕對定位元素的left、top、right、bottom屬性為默認的“auto”值，而不是給定長度值。當屬性為“auto”值時，絕對定位元素不會參考任何定位的祖先元素，而是參照它作為靜態流動元素應該放置的“static”位置。它占據著該位置，但仍保持在一個單獨的層上，或許會疊加在文本流上。

一般情況下會很好，但真正這樣做會使我們失去對每一個邊距屬性的控制，當我們需要將AP元素放置到理想位置時，我們就需要正常的利用這些屬性了。如果AP元素的靜態位置碰巧與我們想讓其放置的位置不一致時，有一種可能的方法可以使自動定位元素發射偏移—-margin。

規則說明，margins在所有AP元素上都能工作，且不會與其它margin 折疊，這大大簡化了這種狀況，但是，有一個問題會導致混淆——AP元素作為內聯元素時，如span和link。

在起前一篇文章曾經提到忽略了邊距和補白的所有top和bottom屬性，但是，AP元素會執行所有的margins和paddings，及時他們是純粹的span和link。這是因為，AP元素會將其轉換成包含塊，或者更具體些—塊元素。

借助于margin使AP元素向四周移動，這看起來不錯，但當你參照前一篇文章中的自動定位演示頁，你會有一點陌生，這是演示頁：

當鼠標經過“link-text”時，AP出現在窗口之中，自動定位將其放在一個內聯span應該出現的位置上，即使span是絕對定位，并且是一個塊元素，就瀏覽器而言，絕對定位的span元素像內聯元素那樣，同時它又是擁有諸如margin、padding和border等屬性的塊元素。

同時，回憶一下第二個演示頁，我給span特定的定義了“display：block”屬性，那樣，所有非IE瀏覽器將span放置到新一行上，并且是從段落的左側開始。這樣，我們看到元素并無多大改變，而是對其自動定位屬性產生了影響。（IE除外）

這非常有趣，但一點也不影響我們的margin實驗。我只是讓你認識到這一點，因為有時候，它會在你毫不知情的情況下使你困惑。

Margins初探

我們想讓AP span彈出框的位置出現的第一點，更靠左一些，使其疊在父鏈接之上。這樣看起來更酷，而且他們重疊，確保用戶來回移動鼠標不會使彈出框消失。

這是同樣的demo，但是其top邊距向下移，right邊距左移，這樣就出現在父鏈接之前，增加以下代碼：

現在，鼠標經過鏈接文本時看到變化沒有？彈出層較以前下移了一些。不錯，但它并沒有向左移！Right邊距看來并未生效。讓我們從不同的方向試試－－用負的left邊距代替正的right邊距。

這是為什么？負left邊距生效而正的right邊距屬性不生效？同樣為什么top邊距也能生效？我們需要更好的demo去探討這個問題，下面是一個相對定位的盒子，四個絕對定位的子div借助其left、top、right、bottom屬性分別位于四個角落。

注意，由于存在四舍五入錯誤，在一些瀏覽器中你會看到盒子的底部和右邊有1px的間隙，到目前為止，一切正常，現在讓我們添加一些邊距。

在下面的示例中四個不同的測試版本中，第一個box擁有left、top邊距，第二個擁有bottom、right邊距。剩下的兩個與前兩個相同但屬性值為負。

分析

你注意到這種模式沒有？只有在絕對定位元素的同一側應用margin和定位屬性值時margin才生效。實際上，在你定義了絕對定位元素的left屬性后，你可以定義margin-left屬性，這樣會生效，其它幾邊是一樣。

你或許會問，為什么是這樣？一個有著嚴格尺寸的絕對定位box會通過兩個相鄰的屬性(left、top、right、bottom)與其他元素相毗鄰。余下的將被忽略或偏移你定義的尺寸大小。

既然只有絕對定位盒子的兩側與其他相聯系，當定義margin時，只有這兩側發生反應。其余的兩側被描述為“半拉子”，它們不觸及任何東西，在不干擾盒子聲明尺寸或已定義屬性值的一側的情況下，其margin屬性不產生任何推拉效果。很明顯，這種行為不是很好，這樣，那些無關的margin將被忽略。

當靜態位置是在從左到右的流中計算時，自動定位盒子看起來好像是由left和top屬性來決定的。這樣，在我們的演示頁中，right屬性不會生效，bottom也是一樣。

絕對定位盒子沒有尺寸時也沒什么不同（僅僅用兩個相鄰的屬性來控制），因為在那種情況下，絕對定位盒子會在垂直和水平方向上收縮以適合內容，這樣是的盒子看起來好像被定義了尺寸，尺寸大小剛好與內容的大小相同。唯一的例外出現在絕對定位盒子由兩個相反屬性控制時。

試試半拉子

讓我們看看，你設置絕對定位盒子的left和right屬性為0，但不定義任何寬度。這樣盒子在其最近的定位的祖先元素中伸展直到填滿所有所有水平空間。現在，絕對定位盒子的兩側與另外一個元素相關，這樣，margin-left和margin-right將會生效，其值無論正負都有效，查看示例

正如你所看到的那樣，正值擠壓盒子的兩邊，而負值使盒子延伸出去。

需要牢記的是：IE6決不允許用兩個相反的屬性值來控制盒子的尺寸，這樣margin也不會生效，除非給絕對定位盒子定義尺寸。

總結

我希望討論能消除絕對定位盒子關于margin屬性的疑慮，一旦這些問題得到理解，它就不會很復雜。除了IE6的限制，希望bug越少越好。

上一篇：IE 下的只讀 innerHTML

下一篇：入門知識:網站地址前的http是什么意思？

返回