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