【Daily】css 定位詳解

css position: absolute、relative詳解

position: absolute 
將對象從文檔流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的一個最有定位設定的父物件進行絕對位置。如果不存在這樣的父物件,則依據body對象。而其層疊通過z-index屬性定義，z-index值為無單位的整數，大的在最上面，可以有負值
此時對象不具有外補丁( margin )，但仍有內補丁( padding )和邊框( border )。 
要啟用物件的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個。否則上述屬性會使用他們的預設值 auto ，這將導致對象遵從正常的HTML布局規則，在前一個對象之後立即被呈遞

position: relative
參照父級（最近）的內容區的左上方為原始點結合TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）進行定位（或者相對於被定位元素在父級內容區中的上一個元素進行位移），無父級則以BODY的左上方為原始點。相對定位是不能層疊的。在使用相對定位時，無論元素是否進行移動，元素依然佔據原來的空間。因此，移動元素會導致它覆蓋其他框。 同樣可以用z-index分層設計。

多個position嵌套時：
position的屬性值的效果，直接受其容器樣式中position屬性值影響。
例如如下A-B的嵌套結構
<div id="A">
 <div id="B">
 </div>
</div>
當A的position為relative時，B的position為absolute才有效。這時候left:0、top:0就不再針對視窗文檔，而是針對id為A的這個div了。
http://www.awflasher.com/blog/archives/731

從應用的角度來說，relative常用於包含有absolute元素的容器元素上。 
absolute元素預設以body做為容器元素進行絕對位置。 
如果你想在頁面一個特定地區進行絕對位置，就可以在absolute元素外包裹一層容器元素應用relative樣式。

CSS普通流：
當瀏覽器開始渲染 HTML 文檔，它從視窗的頂端開始，經過整個文檔內容的過程中，分配元素需要的空間。除非文檔的尺寸被 CSS 特別的限定，否則瀏覽器垂直擴充文檔來容納全部的內容。每個新的區塊層級元素渲染為新行。行內元素則按照順序被水平渲染直到當前行遇到了邊界，然後換到下一行垂直渲染。這個過程被成為普通文檔流。

通過 Wiz 發布