談談相對定位

03-02

美好的周末從碼字開始......

說道相對定位，相信很多童鞋會立馬想到絕對定位。雖是同個媽生的，爹地卻不同，那麼性情絕對是不相同滴。

是什麼

相對定位，它是一種定位機制，可以使得block-level box和inline-level box相對它們本身的位置上下左右移動一段距離。

這個「本身的位置」可以是box進行block formatting / inline formatting之後的位置，也可以是進行float定位之後的位置。

這表明：相對定位既可以對普通流里的元素進行定位，也可以對float元素進行定位。

怎麼用

CSS中有五個屬性可以用來相對定位。其中position必須設為relative,另外四個屬性用法如下：

屬性名: left
含義：在水平方向上，box往右邊移動的距離
值: <length> | <percentage> | auto | inherit
初始值: auto
應用對象: 定位元素
繼承性: 無
百分比值 :參考對象為containing block的寬度

屬性名: right
含義：在水平方向上，box往左邊移動的距離

值: <length> | <percentage> | auto | inherit
初始值: auto
應用對象: 定位元素
繼承性: 無
百分比值 :參考對象為containing block的寬度

屬性名: top
含義：在垂直方向上，box往下方移動的距離
值: <length> | <percentage> | auto | inherit
初始值: auto
應用對象: 定位元素

繼承性: 無
百分比值 :參考對象為containing block的高度

屬性名: bottom
含義：在垂直方向上，box往上方移動的距離
值: <length> | <percentage> | auto | inherit
初始值: auto
應用對象: 定位元素
繼承性: 無
百分比值 :參考對象為containing block的高度

我們通過指定left, right, top, bottom的值來就可以控制box的位置。其實實際應用時，我們只需要設置left或right, top或bottom就可以了。但是如果left和right都設置值了，或是top和bottom都設置值了，css怎麼去確定元素的位置呢？

。。。哎，好頭疼，幹嘛兩個都設置呀，這讓css解析器怎麼確定box的位置呀。。

其實，他們有的是規則對付！

規則一：這四個屬性的used value始終保證 left = - right, top = -bottom

規則二：left, right 值均為auto，則它們的used value均為0；同理top和bottom

規則三：left， right中只有一個為auto, 則它的used value為另外一個的相反數；同理top和bottom

規則四：left和right均不為auto的情況下，父元素的direction為ltr，則 left的used value為開發人員設定的值，right = -left ；父元素的direction為rtl，則 right值為開發人員設定的值，left = -right

規則五：top和bottom均不為auto的情況下，top值為開發人員設定的值，bottom= - top

這些規則足以應對任何情況。看吧，既然css放開這些屬性給你設置，肯定做好了任何情況的準備工作。

接下來上個栗子(測試工具：chrome 49.0)

<html> <head> <style type="text/css"> .comparation{ width:210px; height:130px; margin:auto; border:solid 2px #5CBDD2; } .child{ width:200px; height:100px; border:solid 2px #E2D72F; } .relative{ position:relative; left:10px; right:20px; top:30px; bottom:40px; } .ltr{ direction:ltr; } .rtl{ direction:rtl; } </style> </head><body><div class=comparation><div class=child> child element</div></div></body></html>

父元素的direction為ltr的情況

為父元素加上css類ltr，代碼修改成醬紫：

<body><div class=comparation ltr><div class=child> child element</div></div></body>

在子元素還沒有進行相對定位時，它們的關係是醬紫的：

因為父元素的direction為ltr，故子元素都是從父元素的左邊開始排列。圖中子元素的左邊框與父元素的左邊框重疊，該位置為子元素在普通流中的正常位置。

現在讓子元素進行相對定位，為子元素加上css類relative：

<body><div class=comparation ltr><div class=child relative> child element</div></div></body>

測試結果如下：

我們明顯看到，父元素與子元素的右邊框，下邊框重疊，而父元素的寬度是比子元素的寬度多出10px，高度多出30px，恰好說明了子元素向右移動了10px，向下移動了30px，子元素的right值及bottom值均被忽略了。

父元素的direction為rtl的情況

為父元素加上css類rtl，代碼修改成醬紫：

<body><div class=comparation rtl><div class=child> child element</div></div></body>

在子元素還沒有進行相對定位時，它們的關係是醬紫的：

子元素從父元素的右邊開始排列，圖中為子元素在普通流中的正常位置。

現在讓子元素進行相對定位，代碼如下：

<body><div class=comparation rtl><div class=child relative> child element</div></div></body>

結果是醬紫的：

我們發現，子元素的左邊框超過了父元素的左邊框，但它們的下邊框依然重疊，這說明了子元素從正常位置上向左移動了20px，向下移動了30px，left值和bottom值均被忽略了。

可以看到，這一切都在我們的預料之中，前提是你通曉css規則！

特殊注意事項

如果沒有控制好間距，相對定位有可能引起元素之間的重疊。

元素A，元素B均為block box，寬度均為100px。它們並列在父元素的懷抱里，A在B的前面，間距為0。突然A使壞了，它啟動了相對定位功能，設置left為50px。你猜猜發生了什麼？

B的一半和A的一半重疊了！！

這是為什麼呢？

普通流中的元素和float元素會先不考慮相對定位，在某一階段中確定好位置，接著，相對定位元素會基於它本身的位置開始定位，定位之後其他元素不會被重新定位，然後。。。。。。。結果你們都知道的！

這中間涉及到元素的渲染流程，之後會出專門的文章，敬請期待吧！

ps: 本文例子均是在chrome 49.0上測試。

（轉載請先徵得本人同意）