定位屬性：

static :默認(rèn)文本流? margin padding 從左到右 從上到下

relative:相對定位

absolute:絕對定位

fixed:固定定位（脫離原來的文本）?

一石洗、相對定位

相對定位是指，該元素相對自己原來位置，偏移一定距離菇存，元素可以通過頂部top，底部bottom，左側(cè)left和右側(cè)right屬性來設(shè)置定位宏榕。它相對的是它自己。?

舉例：大div里面包含5個(gè)小P胸懈，給P不同的類名担扑，分別設(shè)置絕對定位和相對定位，看看他們有什么變化趣钱。沒有設(shè)置定位的代碼如下：

源碼

效果如圖所示：

相對定位圖例1

現(xiàn)在給第一個(gè)p標(biāo)簽設(shè)置相對定位涌献，讓他相對于自己原來的位置上偏移50px，左邊偏移50px首有，具體代碼如下：

1.p1{width: 100px;height: 100px;background: red;position: relative;left: 50px;top: 50px;}

效果圖：

相對定位圖例2

對比前后效果圖燕垃，有沒有發(fā)現(xiàn)第一個(gè)p元素，它相對自己原來的位置發(fā)生了偏移井联，而且偏移以后卜壕，它依然占據(jù)原來的位置，后面的元素不會(huì)填補(bǔ)烙常，如果有重疊轴捎，會(huì)重疊在它文檔流元素之上，相對定位不會(huì)把其他元素?cái)D掉蚕脏。

二侦副、絕對定位

絕對定位是指，該元素相對它的父元素偏移一定距離驼鞭，元素可以通過頂部top秦驯，底部bottom，左側(cè)left和右側(cè)right屬性來設(shè)置定位挣棕。

注：相對的是父元素译隘，而且這個(gè)父元素必須設(shè)置了position屬性亲桥。如果父元素沒有position屬性，則從最近的父元素開始找固耘，直到找到body為止题篷。

舉例：給第三個(gè)p元素設(shè)置絕對定位，讓其上偏移200px玻驻，左偏移200px悼凑，具體代碼如下：

.p3{width: 100px;height: 100px;background: yellow;position: absolute;left: 200px;top: 200px;}

絕對定位圖例

對比圖1和圖3可以發(fā)現(xiàn)，設(shè)置了絕對定位的元素璧瞬，會(huì)脫離文檔流，后面的元素會(huì)填補(bǔ)上來渐夸。因?yàn)榈谌齻€(gè)p標(biāo)簽的父元素為div嗤锉，沒有給div設(shè)置position屬性，所以它最終找到body墓塌，相對于body發(fā)生了偏移瘟忱。

三、相對定位和絕對定位的區(qū)別

相對定位：相對自己原來的位置發(fā)生偏移苫幢，不會(huì)脫離文檔流访诱，不會(huì)刪除它原來在文檔流中占據(jù)的位置，且后面是元素不會(huì)填補(bǔ)空位

絕對定位：相對它的父元素發(fā)生偏移（而且這個(gè)父元素必須設(shè)置了position屬性韩肝，如果父元素沒有position屬性触菜，則從最近的父元素開始找，直到找到body為止）哀峻，會(huì)脫離文檔流涡相，后面的元素會(huì)填補(bǔ)它原來的位置。

四剩蟀、固定定位

position:fixed;

? ? ? ? ? ? 盒子將脫離原來的文本流催蝗，進(jìn)入到新的一層，

? ? ? ? ? ? 蓋在原來文本流之上育特，并且可以通過left right top bottom

? ? ? ? ? ? 四個(gè)屬性丙号，對盒子進(jìn)行移動(dòng)，移動(dòng)的基準(zhǔn)定是瀏覽器視窗缰冤，與其他盒子無關(guān)

定位四條代碼必須寫：?

????????????position:設(shè)置位置屬性;

? ? ? ? ? ? left/right/top/bottom/right:進(jìn)行定位操作;

? ? ? ? ? ? z-index:設(shè)置該盒子的顯示優(yōu)先級（沒有單位 0開始增大 值越大越開始靠前）

? ? ? ? ? ? 盒子固定定位后犬缨，回脫離原來的文本，同樣將不在具有原來的特性锋谐，寬高由內(nèi)容撐開遍尺，margin:會(huì)疊加; 一般不用margin進(jìn)行位置改變，任何盒子都可以fixed涮拗。

? ? ? ? ? ? 應(yīng)用場景：廣告乾戏，聊天窗口迂苛，導(dǎo)航，活動(dòng)信息?