HTML浮動與定位方式詳解__HTML

關於float與position的三種狀態使用。
先簡單介紹一下position的三種狀態分別是fixed、absolute和relative

首先float用於修飾區塊層級元素，這邊用div來做例子。

當元素進行左浮動時，會變成排成一行顯示，同時若使用右浮動也會使元素排成一行，同時順序顛倒(原本綠色在左上，同時進行右浮動時綠色會在右上，紅色在其左側)
當使用fixed修飾時進行float不會有任何的效果，因為其本身以及脫離文檔流，不能再進行浮動，而只能通過具體的數值或者百分比來絕對控制位置，同時也不會隨著頁面的變化而變化，因此不會對其他的元素產生任何的影響。一般用作與全域顯示的元素。
absolute也會脫離的正常的文檔流，但是他和fixed的區別在於他會受到父容器的一定影響，同時如果兩個元素同時都是absolute也會相互有影響。同樣，浮動也會失效，不在具有浮動特性，定位方式同上。如果其中一個元素是absolute定位而另外一個不是，則不會互相影響，會直接覆蓋

relative即預設的相片順序，當前元素保持在正常的文檔流中。
總結：
fixed：固定元素位置，脫離正常文檔流，不論頁面中元素如何變化，當前fixed元素始終固定位置，一般用於一些頂部菜單
absolute：讓當前元素脫離正常的文檔流，對當前元素的位置改變(left,top,right,bottom)不會影響鄰近的元素，如果使用margin，padding屬性也不會影響臨近的元素（除非鄰近的元素也是絕對位置）
relative:當前元素保持在正常的文檔流中，對當前元素的位置改變(left,top,right,bottom)不會影響鄰近元素，但是如果使margin,padding屬性值進行留白，則附近元素會受到位置影響而產生變化