css常用的四種定位類型static、relative卖漫、absolute费尽、fixed。要清楚的理解四種定位類型羊始，首先要知道什么是文檔流旱幼？
什么是文檔流？
normal flow（普通流）突委，元素在html中的排列方式——塊級(jí)元素獨(dú)占一行垂直排列柏卤，內(nèi)聯(lián)元素在行內(nèi)從左至右依次排列
靜態(tài)定位（static）
static定位，也叫靜態(tài)定位匀油，是html元素默認(rèn)的定位方式缘缚，它遵循正常的文檔流，占用文檔空間敌蚜，該定位方式下桥滨，top、right、bottom齐媒、left蒲每、z-index等屬性是無(wú)效的。
相對(duì)定位（relative）
relative定位喻括，也叫相對(duì)定位邀杏，根據(jù)原本在文檔流中的位置進(jìn)行偏移，遵循正常的文檔流唬血，但是top望蜡、right、left拷恨、bottom屬性是生效的泣特，最重要的是相對(duì)定位會(huì)占用原本的文檔空間。
如下圖所示挑随，雖然紅色方框相對(duì)虛線方框（原本位置）進(jìn)行偏移状您，但是仍然占據(jù)原本的文檔空間，所以綠色方框位置不會(huì)改變兜挨，并且紅色方框的偏移會(huì)覆蓋其他方框膏孟。
<style type="text/css">
.red{position: relative; top: 20px; left: 20px;}
</style>
絕對(duì)定位（absolute）
absolute定位，也叫絕對(duì)定位拌汇，使用絕對(duì)定位的元素脫離文檔流柒桑，只能根據(jù)祖先類元素(父類以上)進(jìn)行定位，而且這個(gè)祖先類還必須是以position屬性非static方式定位的噪舀。 舉個(gè)栗子魁淳，若a元素使用絕對(duì)定位，它會(huì)從父類開始找起与倡，尋找以position屬性非static方式定位的祖先類元素界逛，直到<html>標(biāo)簽為止。這里還需要注意的是纺座，relative和static方式在最外層是以<body>標(biāo)簽作為定位原點(diǎn)息拜，而absolute方式是以<html>標(biāo)簽作為定位原點(diǎn)。<html>和<body>元素相差8px左右的margin净响。
如下圖所示少欺，紅色虛線框使用絕對(duì)定位，綠色虛線框使用相對(duì)定位馋贤。
<style type="text/css">
.green{border: 2px dotted green; position: relative;}
.red{border: 2px dotted red; position: absolute; top: 0px; left: 0px;}
</style>
絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)赞别，因此不占據(jù)文檔空間，這一點(diǎn)與相對(duì)定位不同配乓。
為什么absoulte定位要加 top: 0px; left: 0px; 屬性仿滔，是不是多此一舉呢惠毁？
其實(shí)加上這兩個(gè)屬性是完全必要的，因?yàn)槲覀內(nèi)绻褂胊bsolute和fixed定位的話堤撵，必須指定top仁讨、right羽莺、bottom实昨、left屬性中的至少一個(gè)，否則top盐固、right荒给、bottom、left屬性會(huì)使用它們的默認(rèn)值auto刁卜，這將導(dǎo)致對(duì)象遵從正常的HTML布局規(guī)則志电，在前一個(gè)對(duì)象之后立即被呈遞，簡(jiǎn)單講就是都變成relative蛔趴，會(huì)占據(jù)文檔空間挑辆，這點(diǎn)非常重要，很多人使用absolute定位后發(fā)現(xiàn)沒有脫離文檔流就是這個(gè)原因孝情，這里要特別注意鱼蝉！
少了top、right箫荡、bottom魁亦、left屬性不行，那如果我們多設(shè)了呢羔挡？例如洁奈，我們同時(shí)設(shè)置了top和bottom的屬性值，那元素又該往哪偏移好呢绞灼？記住下面的規(guī)則：
如果top和bottom同時(shí)存在利术，那么只有top生效。
如果left和right同時(shí)存在低矮，那么只有l(wèi)eft生效氯哮。
固定定位（fixed）
fixed定位，又叫固定定位商佛，它和absolute定位一樣喉钢，脫離了文檔流，并且能夠根據(jù)top良姆、right肠虽、left、bottom屬性進(jìn)行定位玛追。但不同的是税课，fixed是根據(jù)窗口為原點(diǎn)進(jìn)行偏移定位的闲延，也就是說它不會(huì)根據(jù)滾動(dòng)條的滾動(dòng)而進(jìn)行偏移。
