[原創] css中的絕對定位和相對定位 詳解CSS position屬性

我對博客的認識是：記錄問題，解決問題，分享知識。若是有輪子，我不須要造輪子。

　   首先，定位不管是相對定位仍是絕對定位，必須有一個參考項，而這個參考項，專業術語稱之爲 包含塊，這裏的包含塊是指在定位時候的包含塊，具體有關包含塊的概念和意義自行研究。

 對於定位postition屬性而言，包含塊的斷定以下(記住就好，理解了就更好)：

1.根元素的包含塊，根元素通常是html元素，有些瀏覽器會使用body做爲根元素，大多數瀏覽器，初始包含塊是一個視窗大小的矩形

2.非根元素的包含塊，若是該元素的position是relative或static，它的包含塊是最近的塊級框，表的單元格或行內塊的內容邊界

3.非根元素的包含塊，若是該元素的position是absolute，則包含塊爲最近的position不是static的祖先元素。簡單來講，它的包含塊會從父級元素一直向上查找，找到第一個position不是static的元素爲止。

4.fixed定位很簡單，相似與absoulte，可是它的包含塊就是瀏覽器窗口，相對來講簡單不少。常見的應用好比固定導航，回到頂部。

 

參考

1.基礎教程

2.詳解CSS position屬性

3.css的float屬性

4.CSS3包含塊及其定位斷定