前兩個”說說標準“系列的帖子已經將常規流中的BFC和IFC都說過了。今天跟大家分享最後常規流中的最後一個要點：常規流中的相對定位。
絕對定位元素在常規流中的佔位是未偏移前的位置
一旦一個框按照常規流或者是浮動得到定位，它還可以相對該位置而偏移。這就是相對定位。按照這種方式偏移一個框(B1)不會對後續的框(B2)有影響：
● B2在定位時，就好象B1沒有發生偏移一樣。
● B1偏移後，B2不會重新定位。
也就是說，B2只認沒有偏移之前的B1，B1的偏移不對B2產生任何影響，相對定位的元素，是處於常規流中的，這點需要注意，另外，相對定位是相對於元素的自身定位，並且，在常規流中還佔據原來的位置。
這也意味着相對定位可能產生框的重疊。比如，http://topic.csdn.net/u/20100728 /16/e10db11c-e212-4e10-83a2-df4ebbf7ccc7.html?70582中關於相對定位的例子中，紅色的框 B 將其下面藍色的框 C 覆蓋了。
相對定位元素溢出包含塊時，應由瀏覽器提供滾動條
然而，如果相對定位引起overflow:auto 或 overflow:scroll 框的溢出，瀏覽器必須允許用戶訪問內容，即，需要創建需要的滾動條，這可能會影響佈局。
例：
在Firefox/Chrome/Safari/IE8(S)/Opera中符合標準，截圖：
![]()
在IE6(Q)/IE7(Q)/IE8(Q)中，沒有出現滾動條，A 的內容也看不到：
![]()
在IE6(S)和IE7(S)中更奇怪，直接將 A 顯示了出來：
![]()
相對定位元素的尺寸
相對定位元素的尺寸，會保持它在常規流中的尺寸。包括換行以及原來爲它保留的位置。
在包含塊的章節中，說明了什麼時候相對定位元素會產生新的包含塊。
如何偏移以及計算後的值
對於一個相對定位的元素，’left’ 和 ‘right’ 會水平的位移框而不會改變它的大小。’left’會將框向右移動，’right’會將框向左移動。由於 ‘left’ 或者 ‘right’ 不會造成框被拆分或者拉伸，所以，計算後的值(computed value)總是：left = -right。
如果 left 和 right 的值都是 ‘auto’ （它們的初始值），計算後的值(computed value)爲 0（例如，框區留在其原來的位置）。
如果 left 爲 ‘auto’，計算後的值(computed value)爲 right 的負值（例如，框區根據 right 值向左移）。
如果 right 被指定爲 ‘auto’，其計算後的值(computed value)爲 left 值的負值。
如果 left 和 right 都不是 auto，那麼定位就顯得很牽強，其中一個不得不被捨棄。如果包含塊的 direction 屬性是 ‘ltr’，那麼 left 將獲勝，right 值變成 "-left"。如果包含塊的 direction 屬性是 ‘rtl’，那麼 right 獲勝，left 值將被忽略。
top 和 bottom 屬性將相對定位元素向上或者向下移動，而不改變其大小。top 把框向下移動，而 bottom 將其向上移動。由於 top 和 bottom 沒有造成框被拆分或者拉伸，計算值總是 top=-bottom，如果兩個都是auto，其計算值就都是0，如果其中之一是auto，它就是另一個的負值。如果都不是auto，bottom被忽 略（例如，bottom的計算值會是top值的負值）。
注意：在腳本環境中，動態移動相對定位框區能夠產生動畫效果（見“visibility屬性”部分）。雖然 相對定位可以用於創建上標或者下標，行高並不會被自動調整以適應定位需要。
至此，常規流中的要素就已經介紹完畢，下面的分享中將開始介紹浮動和絕對定位的內容，敬請期待……
可視化格式模型概述：
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196
更多說說標準系列：
絕對定位元素在常規流中的佔位是未偏移前的位置
一旦一個框按照常規流或者是浮動得到定位，它還可以相對該位置而偏移。這就是相對定位。按照這種方式偏移一個框(B1)不會對後續的框(B2)有影響：
● B2在定位時，就好象B1沒有發生偏移一樣。
● B1偏移後，B2不會重新定位。
也就是說，B2只認沒有偏移之前的B1，B1的偏移不對B2產生任何影響，相對定位的元素，是處於常規流中的，這點需要注意，另外，相對定位是相對於元素的自身定位，並且，在常規流中還佔據原來的位置。
這也意味着相對定位可能產生框的重疊。比如，http://topic.csdn.net/u/20100728 /16/e10db11c-e212-4e10-83a2-df4ebbf7ccc7.html?70582中關於相對定位的例子中，紅色的框 B 將其下面藍色的框 C 覆蓋了。
相對定位元素溢出包含塊時，應由瀏覽器提供滾動條
然而，如果相對定位引起overflow:auto 或 overflow:scroll 框的溢出，瀏覽器必須允許用戶訪問內容，即，需要創建需要的滾動條，這可能會影響佈局。
例：
- HTML code
-
<div style="width:100px; height:100px; overflow:auto; border:2px solid blue;"> <div style="width:20px; height:20px; background-color:red; position:relative; top:100px; left:100px;">A</div> </div>
在Firefox/Chrome/Safari/IE8(S)/Opera中符合標準，截圖：
在IE6(Q)/IE7(Q)/IE8(Q)中，沒有出現滾動條，A 的內容也看不到：
在IE6(S)和IE7(S)中更奇怪，直接將 A 顯示了出來：
相對定位元素的尺寸
相對定位元素的尺寸，會保持它在常規流中的尺寸。包括換行以及原來爲它保留的位置。
在包含塊的章節中，說明了什麼時候相對定位元素會產生新的包含塊。
如何偏移以及計算後的值
對於一個相對定位的元素，’left’ 和 ‘right’ 會水平的位移框而不會改變它的大小。’left’會將框向右移動，’right’會將框向左移動。由於 ‘left’ 或者 ‘right’ 不會造成框被拆分或者拉伸，所以，計算後的值(computed value)總是：left = -right。
如果 left 和 right 的值都是 ‘auto’ （它們的初始值），計算後的值(computed value)爲 0（例如，框區留在其原來的位置）。
如果 left 爲 ‘auto’，計算後的值(computed value)爲 right 的負值（例如，框區根據 right 值向左移）。
如果 right 被指定爲 ‘auto’，其計算後的值(computed value)爲 left 值的負值。
- HTML code
-
<div style="width:20px; height:20px; background-color:red; position:relative; left:100px;"></div>
如果 left 和 right 都不是 auto，那麼定位就顯得很牽強，其中一個不得不被捨棄。如果包含塊的 direction 屬性是 ‘ltr’，那麼 left 將獲勝，right 值變成 "-left"。如果包含塊的 direction 屬性是 ‘rtl’，那麼 right 獲勝，left 值將被忽略。
- HTML code
-
<div style="width:100px; height:100px; overflow:auto; border:1px solid blue;"> <div style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:60px;"></div> </div>
top 和 bottom 屬性將相對定位元素向上或者向下移動，而不改變其大小。top 把框向下移動，而 bottom 將其向上移動。由於 top 和 bottom 沒有造成框被拆分或者拉伸，計算值總是 top=-bottom，如果兩個都是auto，其計算值就都是0，如果其中之一是auto，它就是另一個的負值。如果都不是auto，bottom被忽 略（例如，bottom的計算值會是top值的負值）。
注意：在腳本環境中，動態移動相對定位框區能夠產生動畫效果（見“visibility屬性”部分）。雖然 相對定位可以用於創建上標或者下標，行高並不會被自動調整以適應定位需要。
至此，常規流中的要素就已經介紹完畢，下面的分享中將開始介紹浮動和絕對定位的內容，敬請期待……
可視化格式模型概述：
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196
更多說說標準系列：
原文地址：
http://topic.csdn.net/u/20100809/18/48b415ca-39d6-420b-92b9-d5182f77b6a1.html
