前邊的都記住啦？那就來(lái)看今天的。

其實(shí)我覺(jué)得，日常用 relative 定位的地方并不多，但是又絕對(duì)不少。這話怎么理解呢？就要先看今天的定位方式：absolute 了。

這個(gè)簡(jiǎn)單，就把上節(jié)課的例子的定位改成 absolute 就好了，我就不再?gòu)?fù)制一遍了，來(lái)看看效果。

現(xiàn)在看到，紅色的格子沒(méi)了他原來(lái)的位置。這就是老師說(shuō)：“小明，你給我搬著桌子椅子滾出去！”然后就連他的位置都不給留了，就當(dāng)沒(méi)他這回事。

然后再說(shuō)定位，老師都不要小明了，所以他也不可能相對(duì)于他原來(lái)的位置進(jìn)行定位了，班里都不承認(rèn)他了，哪里還有位置啊。

那么他的 left 之類的屬性相對(duì)于誰(shuí)呢？相對(duì)于套在他外面的，從他開(kāi)始往外數(shù)，第一個(gè)定位方式不是 static 的元素。這個(gè)聽(tīng)起來(lái)亂，其實(shí)也很簡(jiǎn)單，就是不是默認(rèn)定位方式的元素。

就是小明這孩子雖然淘氣，但是有良心啊。默認(rèn)的不敢跟別人說(shuō)自己是被某某學(xué)?；蛘哒f(shuō)自己被某某班開(kāi)除的，他怕給學(xué)校啊、班級(jí)啊……丟臉。只有當(dāng)這些集體聲明過(guò)不在乎（聲明其他的定位方式），他才敢說(shuō)自己是從那里出來(lái)的。而且，為了牽連更少的人跟自己丟臉，如果班級(jí)和學(xué)校都做了聲明，他只說(shuō)班級(jí)，不說(shuō)學(xué)校。

如果他外面的元素都沒(méi)有聲明其他的定位方式怎么辦？那他相對(duì)于頁(yè)面的最邊緣進(jìn)行定位，注意是頁(yè)面，不是 html 或者 body 元素，是更外面的頁(yè)面邊緣。

但是這樣想找小明在哪里真的好難！所以一般的我們會(huì)給父級(jí)元素進(jìn)行 relative 定位，但是不進(jìn)行偏移，就是不設(shè)置 left 什么的值，這樣父級(jí)元素還在他原來(lái)的地方，還站著原來(lái)的位置，仿佛什么都沒(méi)變化過(guò)。這就明白了為什么前邊我說(shuō) relative 用的不多卻也不少，因?yàn)閱为?dú)用它本身特性的地方可能比較少，但是出現(xiàn) absolute 定位的時(shí)候，他一般都會(huì)在外層輔助性的出現(xiàn)。

就是小明被轟出去了，老師很開(kāi)心，說(shuō)我們?nèi)啻蠛铣獞c祝一下吧，但是不用動(dòng)地方了，都在座位上唱就好了。反正我說(shuō)的挺玩笑的，你理解就好，后面我們會(huì)有案例來(lái)專門說(shuō)明這些問(wèn)題的?，F(xiàn)在就是把故事聽(tīng)明白，知道我比喻的是些什么。

本章代碼下載：本章代碼

本書(shū)是收費(fèi)的，不過(guò)交費(fèi)憑自覺(jué)。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書(shū)將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡(jiǎn)書(shū)： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me