absolute的意思是絕對(duì)定位,他默認(rèn)參照瀏覽器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面簡(jiǎn)稱TRBL)進(jìn)行定位,有以下屬性:
1)如果沒有TRBL,以父級(jí)的左上角,在沒有父級(jí)的時(shí)候,他是參照瀏覽器左上角,如果在沒有父級(jí)元素的情況下,存在文本,則以它前面的最后一個(gè)文字的右上角為原點(diǎn)進(jìn)行定位但是不斷開文字,覆蓋于上方。
2)如果設(shè)定TRBL,并且父級(jí)沒有設(shè)定position屬性,那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位,位置將由TRBL決定。
3)如果設(shè)定TRBL,并且父級(jí)設(shè)定position屬性(無論是absolute還是relative),則以父級(jí)的左上角為原點(diǎn)進(jìn)行定位,位置由TRBL決定。即使父級(jí)有Padding屬性,對(duì)其也不起作用,說簡(jiǎn)單點(diǎn)就是:它只堅(jiān)持一點(diǎn),就以父級(jí)左上角為原點(diǎn)進(jìn)行定位,父級(jí)的padding對(duì)其根本沒有影響。
以上三點(diǎn)可以總結(jié)出,若想把一個(gè)定位屬性為absolute的元素定位于其父級(jí)元素內(nèi),只有滿足兩個(gè)條件:
第一:設(shè)定TRBL
第二:父級(jí)設(shè)定Position屬性
上面的這個(gè)總結(jié)非常重要,可以保證你在用absolue布局頁面的時(shí)候,不會(huì)錯(cuò)位,并且隨著瀏覽器的大小或者顯示器分辨率的大小,而不發(fā)生改變。
只要有一點(diǎn)不滿足,元素就會(huì)以瀏覽器左上角為原點(diǎn),這就是初學(xué)者容易犯錯(cuò)的一點(diǎn),已經(jīng)定位好的板塊,當(dāng)瀏覽器的大小改變,父級(jí)元素會(huì)隨之改變,但是設(shè)定Position屬性為absolute的板塊和父級(jí)元素的位置發(fā)生改變,錯(cuò)位了,這就是因?yàn)榇藭r(shí)元素以瀏覽器的右上角為原點(diǎn)的原因。 初學(xué)者很容易犯錯(cuò)的是,不清楚Position屬性為absolute的板塊,若想定位到父級(jí)板塊中,并且當(dāng)瀏覽器的大小改變或顯示器的分辨率改變,布局不發(fā)生改變,是需要滿足兩個(gè)條件的,只要有一點(diǎn)不滿足,元素就會(huì)以瀏覽器左上角為原點(diǎn),從而導(dǎo)致頁面布局錯(cuò)位。