static:無特殊定位隙轻,對象遵循正常文檔流。top垢揩,right玖绿,bottom,left等屬性不會被應(yīng)用叁巨。
relative:對象遵循正常文檔流斑匪,但將依據(jù)top,right锋勺,bottom蚀瘸,left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義庶橱。
absolute:對象脫離正常文檔流贮勃,使用top,right苏章,bottom寂嘉,left等屬性進(jìn)行絕對定位奏瞬。而其層疊通過z-index屬性定義。
fixed:對象脫離正常文檔流泉孩,使用top硼端,right,bottom寓搬,left等屬性以窗口為參考點進(jìn)行定位珍昨,當(dāng)出現(xiàn)滾動條時,對象不會隨著滾動句喷。而其層疊通過z-index屬性定義镣典。
什么是文檔流?
將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流脏嚷。
只有三種情況會使得元素脫離文檔流骆撇,分別是:浮動瞒御、絕對定位和相對定位父叙。
- 靜態(tài)定位(static) :
static,無特殊定位肴裙,它是html元素默認(rèn)的定位方式趾唱,即我們不設(shè)定元素的position屬性時默認(rèn)的position值就是static,它遵循正常的文檔流對象蜻懦,對象占用文檔空間甜癞,該定位方式下,top宛乃、right悠咱、bottom、left征炼、z-index等屬性是無效的析既。
- 相對定位(relative) :
relative, 相對定位相對的是它原本在文檔流中的位置而進(jìn)行的偏移