HTML中元素的定位方式

初中物理就學過，位置是相對的，要有參照物，因此，所有定位都是相對參照物的定位。

position 屬性：

    規定元素的定位類型，該屬性的可選值有static、relative、absolute、fixed、inherit。定義了position屬性后，經常還要定義相對參照物的偏移量，即left，right，top，bottom屬性值，當然，也可以不定義，那樣的話，就是在參照物的位置上。

float屬性：

    規定元素是否浮動，其實，這個屬性也是定位的一種類型，但搞不懂為什么它沒有出現在position可選值中，而非要做成一個單獨的屬性，比較可能的原因是，在position的可選值中（static除外），是指定相對參照物的具體偏移量——left，right，top，bottom，而浮動指定的不是具體的偏移量，而只是偏移方向而已，浮動的框只能向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。因此兩種定位方式沒法統一起來。

Z-index屬性：

    上面的定位都在是二維空間做的，定位過程中有可能出現元素部分重疊的情況，這種情況下，誰覆蓋誰呢，由此引用了Z-index屬性，來指定元素的層次。注意：static定位的元素，其Z-index恆等於0，無法修改；另外，Z-index屬性只能用於position=relative/absolute/fixed這些已經在二維空間定位過的元素。

屬性	值	定位參照物	是否仍占據文檔流的位置	描述
position	static	由文檔流自然形成	是	默認值，，無需顯式定義。元素出現在正常的流中（忽略 top, bottom, left, right, z-index 聲明）。
	relative	相對自己在文檔流中的位置	是，該元素在文檔流中占據的空間不會釋放	生成相對定位的元素，相對於其文檔流位置進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
	absolute	相對第一個定位過的父元素，即position=relative/absolute/fixed的父元素，（static定位過的父元素不算）	否，已經脫離文檔流	生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
	fixed	相對瀏覽器窗口	否，已經脫離文檔流	生成絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
	inherit	繼承父元素的定位類型	由父元素的定位類型來確定	規定應該從父元素繼承 position 屬性的值。
float	left、right、none、inherit	相對父元素（不論是否定位過）和前一個浮動框	否，已經脫離文檔流	浮動的框只能向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止