首先,我們來討論一下html中共有幾種定位方式:靜態定位(static),相對定位(relative),絕對定位(absolute,fixed).其中fixed又叫固定定位,它是屬於絕對定位的一種,但是又有所不同。下面我就來具體講解一下。
首先,static定位就是我們html中默認的定位方式,就是元素就是從上到下,從左到右。
相對定位(relative),相對定位。元素設置了相對定位后,元素是相對於他原來的位置發生偏移,但是元素並沒有脫離標准文檔流,也就是他原來的位置還是存在的,其他元素不能移到他的原來位置(相當於雖然他原來位置沒有東西了,但是位置還是占着的,其他元素不可以移到該位置上)。
絕對定位(absolute)。絕對定位比較復雜了,首先我們結合絕對定位和固定定位一起來講解
首先,相同點。
絕對定位不是相對於自己原來位置的偏移。
兩者都會脫離標准文檔流,這句話是什么意思?其實估計大家都不是很清楚,也就是說他移動后他原來的位置就空了,后面的元素會自動移動上去,其次,他現在的位置也不再標准文檔流當中,也就是說他現在的相當於浮動在標准文檔流之上。
不同點:
首先分兩種情況來討論
一,設置了偏移量
舉一個例子: postition:absolute ;left:23px;top:12px;或者postition:fixed ;left:23px;top:12px;這樣的話設置absolute方式的是相對於距離他最近的祖先元素,且該祖先元素也設置了定位方式。來偏移的。而fixed則是相對於body元素的位子來偏移的。
第二種情況:設置了定位,但是沒有設置偏移量時,兩者都是相對於父類來說的,他們都會移動到父類的左上角。
第二個不同點:
設置了fixed的定位方式的元素是不會隨着滾動條的滾動而發生位置的變化的,而設置abslute的定位方式的會發生未知的變化。