position:static | absolute | fixed | relative
[1] static:?默認(rèn)值鲤屡，無(wú)定位，不能當(dāng)作絕對(duì)定位的參照物，并且設(shè)置標(biāo)簽對(duì)象的left啦鸣、top等值是不起作用的的瞒津。
[2]relative:? 相對(duì)定位 蝉衣，不設(shè)置left，right和top巷蚪，bottom的值病毡，這些值則默認(rèn)值為0。相對(duì)定位是相對(duì)于該元素在文檔流中的原始位置屁柏，即以自己原始位置為參照物啦膜。有趣的是，即使設(shè)定了元素的相對(duì)定位以及偏移值前联，元素還占有著原來(lái)的位置功戚，即占據(jù)文檔流空間。（這里的占據(jù)文檔流指的是占據(jù)原來(lái)的位置似嗤，而不是占據(jù)相對(duì)定位后的位置。個(gè)人理解：相對(duì)定位后的元素則會(huì)疊加到新位置的上届宠，覆蓋原先新位置上的元素烁落，但是在新位置上不實(shí)際占據(jù)空間）如下圖所示，頭像相對(duì)定位前在box1盒子下方豌注，頭像相對(duì)定位后伤塌，頭像原來(lái)的位置空著，但是下方的帶有文本的盒子并沒(méi)有移動(dòng)上來(lái)轧铁。
*position：relative的另一個(gè)主要用法：方便絕對(duì)定位元素找到參照物每聪。
[3]absolute:絕對(duì)定位
定義：設(shè)置為絕對(duì)定位的元素框從文檔流完全刪除，并相對(duì)于最近的已定位祖先元素定位齿风，如果元素沒(méi)有已定位的祖先元素药薯，那么它的位置相對(duì)于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉救斑，就好像該元素原來(lái)不存在一樣童本。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類(lèi)型的框脸候。
***如果父級(jí)設(shè)置了position屬性穷娱，例如position:relative;，那么子元素就會(huì)以父級(jí)的左上角為原始點(diǎn)進(jìn)行定位运沦。這樣能很好的解決自適應(yīng)網(wǎng)站的標(biāo)簽偏離問(wèn)題泵额，即父級(jí)為自適應(yīng)的，那我子元素就設(shè)置position:absolute;父元素設(shè)置position:relative;携添，然后Top嫁盲、Right、Bottom薪寓、Left用百分比寬度表示亡资。
*總結(jié)：參照物用相對(duì)定位澜共，子元素用絕對(duì)定位，并且保證相對(duì)定位參照物不會(huì)偏移即可锥腻。
? ? ? ? ? ? 絕對(duì)定位的層設(shè)好要參照位置的層后嗦董，就可以用TOP，LEFT這些來(lái)定位置了瘦黑，如果它的上級(jí)或上上級(jí)都沒(méi)定位的話只就會(huì)根據(jù)BODY的位置來(lái)定位了,還有最后一點(diǎn)京革，絕對(duì)定位是不占位置的，它會(huì)像PS的圖層一樣單獨(dú)做一層幸斥，至于第幾層你可以通過(guò)z-index:這個(gè)屬性來(lái)設(shè)置匹摇。
**注意：僅使用margin屬性布局絕對(duì)定位元素的情況
margin-bottom 和margin-right的值不再對(duì)文檔流中的元素產(chǎn)生影響，因?yàn)樵撛匾呀?jīng)脫離了文檔流甲葬。另外廊勃，不管它的祖先元素有沒(méi)有定位，都是以文檔流中原來(lái)所在的位置上偏移參照物经窖。
[4]fixed：類(lèi)似于將 position 設(shè)置為 absolute坡垫，脫離文檔流，不過(guò)其包含塊是瀏覽器視窗本身画侣。
原作者：www.cnblogs.com/shenfangfang/p/5278528.html
? ? ? ? ? ? ? ?zh.learnlayout.com/no-layout.html
