css布局定位系列：相對定位

css 　英文原文:http://brainjar.com/css/positioning/default.asp　

　　翻譯:零度，轉載請註明本文英文原文出處以及本文地址!由於我英文水平有限，有不懂的地方還請閱讀原文，歡迎交流!

　　相對定位

　　當一個元素被指明為{position:relative;}的時候，它開始是遵守正常流規則的(也就是說，如果你不給他任何規則，他就和正常的一樣，譯者注)，它周圍元素相應的被定位。然後，元素盒根據它的屬性值位移。

　　請注意上面元素周圍的盒子是正常布局的，包括垂直邊距的摺疊，因此，採用相對定位的元素有可能覆蓋其他元素。

　　瀏覽器安全色性
　　瀏覽器在處理相對定位元素覆蓋其他元素的方法上是存在分歧的。不幸的是，W3C標準並沒有指明應該怎麼處理這個問題。
　　因此，像IE5.5和Netscape6.0，會將相對定位元素顯示在他周圍元素的上面。而其餘的，比如Opera5.0,將使用預設棧指令，從而是將相對定位元素顯示在文檔流裡比它先出現元素的前面,比它後出現元素的後面。
　　棧指令在絕對位置參考中有詳細的描述。但是請注意你可以使用z-index屬性去設定它的顯示順序(z-index的值越大，元素越靠前顯示!)

　　可以聯合使用top,right,left和bottom四個屬性來設定相對定位元素的位移值。每一個屬性值被解釋為元素外邊框相對於原來正常位置的距離。

　　請注意這些位移值是有約束的。例如，假設你同時設定了left和right屬性的值，如果其中一個元素的值不是另外一個值的相反值的話(比如4和-4,譯者注)，那麼right屬性的值將會被忽略。設定某一個具體的寬度值也有可能使位移值被忽略。這個規則同樣適用於top,bottom以及height屬性。

　　在實際中，你將很有可能只設定left,right中的任一個以及top，bottom中的任一個。

　　子節點定位(Descendant Positioning)

　　相對定位元素是否建立一個新的包含塊以定位(相對定位或者絕對位置)子項目是不確定的，他們遵守非定位元素一樣的規則。

　　如果相對定位元素是區塊層級元素，那麼它將建立一個新的包含塊。在它裡面的元素使用元素的位移量作為基礎定位。也就是說，子項目的位移量是一個複合值(包含塊位移量加上它自己的位移量)

　　如果相對定位元素是行類元素，它的位移量和它的子項目沒有關係，相反，它和它的子項目共用同一個父級包含塊。

　　瀏覽器安全色性

　　最初的W3C標準聲明，相對定位元素總是建立一個包含塊。然而，後續標準修正了這個聲明，指出相對定位元素和普通元素一樣。

　　有一些瀏覽器包括了這個修正但是有一些沒有。由於這個差別，你可能希望避免這樣的情況，總是使用一個區塊層級元素用於相對定位。