position和float小結
position屬性值
Position的屬性值共有四個static、relative、absolute、fixed。
static
所有元素在默認的情況下position屬性均為static，而我們在布局上經常會用到的相對定位和絕對定位常用的屬性top、bottom、left、right在position為static的情況下無效。其用法為：在改變了元素的position屬性後，可以將元素重置為static讓其回歸到頁面默認的普通流中。
relative
俗稱的相對定位，重點在於對相對理解。每個元素在頁面的普通流中會有“占用”一個位置，這個位置可以理解為默認位置，而相對定位就是將元素偏離元素的默認位置，但普通流中依然保持著原有的默認位置，並沒有脫離普通流，只是視覺上發生的偏移。相對於默認位置偏移後，並不會影響其後面其他元素的定位。同時，position: relative並沒有改變行內元素的Display屬性（對行內元素設置寬度和高度均無效）。
absolute
俗稱的絕對定位，絕對定位是相對而言的，怎麽理解呢？應用了position: absolute的元素會循著節點樹中的父（祖）元素來確定“根”，然後相對這個“根”元素來偏移。如果在其節點樹中所有父（祖）元素都沒有設置position屬性值為relative或者absolute，則該元素最終將相對body進行位置偏移。應用了position: absolute的元素會脫離頁面中的普通流並改變Display屬性！
1）塊狀元素在position(relative/static)的情況下width為100%，但是設置了position: absolute之後，會將width變成auto（取決於內部元素的width）。
2）元素設置了position: absolute之後，如果沒有設置top、bottom、left、right屬性的話，瀏覽器會默認設置成auto，而auto的值則是該元素的“默認位置”，建議設置偏移量。
一些的position小知識
1）position: absolute會忽略根元素的padding，相對於根元素的border裏面的邊定位。
2）行內元素在應用了position：absolute之後會改變display為block。
因此，要註意到relative是並沒有改變行內元素的呈現模式，而absolute是會改變行內元素的呈現模式，如果設置了absolute並不需要顯式的的將元素display改成block。
3）應用了position: absolute / relative之後，會覆蓋其他非定位元素（即position為static的元素），如果你不想覆蓋到其他元素，也可以將z-index設置成-1。
fixed
fixed和absolute有很多共同點：
- 會改變行內元素的呈現模式，使display之變更為block。
- 會讓元素脫離普通流，不占據空間。
- 默認會覆蓋到非定位元素上。
fixed與absolute最大的區別在於：
absolute的”根元素“是可以被設置的，而fixed則其”根元素“固定為瀏覽器窗口。即當你滾動網頁，其元素與瀏覽器窗口之間的距離是恒定不變的。
對於頁面布局中的最外層div設置 position:fixed;top:0;left:0，則頁面無法滾動，因為fixed定位的元素相對於瀏覽器的位置保持不變，即div的頂部挨著瀏覽器窗口的頂部。適用於出現彈窗之後，滾動彈窗中的內容，主頁面內容不滾動。
使用fixed定位吸底按鈕時，要在主頁面的內容最後面添加一個跟按鈕高度相同的div，防止按鈕遮擋住主頁面的內容。
float屬性
float的屬性值有none、left、right，有幾個要點：
1.只有橫向浮動，並沒有縱向浮動。
2.當元素應用了float屬性後，將會脫離普通流，其容器（父）元素將得不到脫離普通流的子元素高度。
3.會將元素的display屬性變更為block。
4.浮動元素的後一個元素會圍繞著浮動元素（典型運用是文字圍繞圖片）。
5.浮動元素的前一個元素不會受到任何影響（如果你想讓兩個塊狀元素並排顯示，必須讓兩個塊狀元素都應用float）。
float與position的兼容性問題
1）元素同時應用了position: relative和float屬性後，則元素先浮動到相應的位置，然後再根據（top / left / bottom / right）所設置的距離來發生偏移。
2）元素同時應用了position: absolute和float屬性，則float失效。
position和float小結