談談相對定位
美好的週末從碼字開始......
說道相對定位，相信很多童鞋會立馬想到絕對定位。雖是同個媽生的，爹地卻不同，那麼性情絕對是不相同滴。
是什麼
相對定位，它是一種定位機制，可以使得block-level box和inline-level box相對它們本身的位置上下左右移動一段距離。
這個“本身的位置”可以是box進行block formatting /inline formatting之後的位置，也可以是進行float定位之後的位置。
這表明：相對定位既可以對普通流裡的元素進行定位，也可以對float元素進行定位。
怎麼用
CSS中有五個屬性可以用來相對定位。其中position必須設為relative,另外四個屬性用法如下：
屬性名: left
含義：在水平方向上，box往右邊移動的距離
值:
初始值: auto
應用物件: 定位元素
繼承性: 無
百分比值 :參考物件為containing block的 寬度
屬性名: right
含義：在水平方向上，box往左邊移動的距離
值:
初始值: auto
應用物件: 定位元素
繼承性: 無
百分比值 :參考物件為containing block的 寬度
屬性名: top
含義：在垂直方向上，box往下方移動的距離
值:
初始值: auto
應用物件: 定位元素
繼承性: 無
百分比值 :參考物件為containing block的 高度
屬性名: bottom
含義：在垂直方向上，box往上方移動的距離
值:
初始值: 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 上測試。