近期會(huì)更新一系列博客，對(duì)基礎(chǔ)知識(shí)再度做個(gè)鞏固和梳理。

一、position定位

（一）：position的屬性

　　1.absolute：生成絕對(duì)定位的元素，相對(duì)于最近一級(jí)定位不是static的父元素來進(jìn)行定位；

　　2.relative：生成相對(duì)定位的元素，相對(duì)于其所在普通的文檔流位置進(jìn)行定位；

　　3.static:默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中;

　　4.fixed:老IE不支持，和absolute一致，相對(duì)于窗口進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，不隨著滾動(dòng)而滾動(dòng)；

　　5.sticky:(CSS3)有兼容性問題，它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果。

（二）：關(guān)于position使用一般會(huì)引發(fā)的問題

　　 1.假如有一個(gè)默認(rèn)100%寬度的div,一旦加上absolute絕對(duì)定位，該元素立馬inline-block化，默認(rèn)寬度就會(huì)自適應(yīng)元素內(nèi)部寬度，會(huì)導(dǎo)致頁(yè)面的寬高塌陷。

　　 2.由于absolute絕對(duì)定位的靈活性，對(duì)于普通的頁(yè)面布局，有時(shí)出于省事的原因很容易造成absolute/relative/top/left/z-index的濫用,這樣會(huì)使后期的擴(kuò)展和維護(hù)造成麻煩

（三）：position代碼示例

　　1.relative相對(duì)定位。

　　Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

對(duì)象2相對(duì)于自身文檔流原來位置移動(dòng)，并還占據(jù)著文檔流，下面的黃色塊繼續(xù)按照它原來的位置往下排列，relative僅僅是視覺上位置變了。

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

<style>body{color: #fff;}.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px}#position1 {height: 100px;background: green;}#position2 {height: 100px;background: blue;position: relative;top: 10px;left: 50px;}#position3{height: 100px;background: yellow;color: #000}</style><body><div class="aa">
    <div id="position1">對(duì)象1