建站
咨詢
售后
建站咨詢
新聞中心
你對用position來布局頁面的方法是否了解，這里和大家分享一下DIV+CSS布局之position屬性的用法，相信本文介紹一定會讓你有所收獲。
成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比名山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式名山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋名山地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。
如何學(xué)習(xí)DIV+CSS布局之position屬性
如果用position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內(nèi)部某個位置的元素，最好用absolute。定位(position)布局頁面說容易非常容易，只需要記住這節(jié)課最后一句話就可以了，說困難，那是相當(dāng)?shù)碾y理解，需要一定的耐心，不過還好，KwooJan給大家總結(jié)的已經(jīng)很通俗易懂了。
如果下面的文字實(shí)在是無法理解透，那就記住這節(jié)課最后總結(jié)的一句話“如果用position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內(nèi)部某個位置的元素，最好用absolute，因?yàn)樗皇芨讣壴氐膒adding的屬性影響，當(dāng)然你也可以用position，不過到時候計(jì)算的時候不要忘記padding的值。”
任何元素的默認(rèn)position的屬性值均是static,靜態(tài)。這節(jié)課主要講講relative（相對）以及absolute（絕對）。
【DIV+CSS布局之position屬性: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)就是：它只堅(jiā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ā)生改變，錯位了，這就是因?yàn)榇藭r元素以瀏覽器的右上角為
原點(diǎn)的原因。
初學(xué)者很容易犯錯的是，不清楚Position屬性為absolute的板塊，若想定位到父級板塊中，并且當(dāng)瀏覽器的大小改變或顯示器的分辨率改
變，布局不發(fā)生改變，是需要滿足兩個條件的，只要有一點(diǎn)不滿足，元素就會以瀏覽器左上角為原點(diǎn)，從而導(dǎo)致頁面布局錯位。
【DIV+CSS布局之position屬性:relative】
意思是相對定位，他是默認(rèn)參照父級的原始點(diǎn)為原始點(diǎn)，無父級則以文本流的順序在上一個元素的底部為原始點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)
父級內(nèi)有padding等CSS屬性時，當(dāng)前級的原始點(diǎn)則參照父級內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位，有以下屬性：
1)如果沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角(到這里和absolute第一條一樣)，如果在沒有父級元素的
情況下，存在文本，則以文本的底部為原始點(diǎn)進(jìn)行定位并將文字?jǐn)嚅_(和absolut不同)。
2)如果設(shè)定TRBL，并且父級沒有設(shè)定position屬性，仍舊以父級的左上角為原點(diǎn)進(jìn)行定位(和absolut不同)
3)如果設(shè)定TRBL，并且父級設(shè)定position屬性(無論是absolute還是relative)，則以父級的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL決定(前
半段和absolut一樣)。如果父級有Padding屬性，那么就以內(nèi)容區(qū)域的左上角為原點(diǎn)，進(jìn)行定位(后半段和absolut不同)。
以上三點(diǎn)可以總結(jié)出，無論父級存在不存在，無論有沒有TRBL，均是以父級的左上角進(jìn)行定位，但是父級的Padding屬性會對其影響。
綜合上面對relative的敘述，我們就可以將position屬性為relative的DIV視成可以用TRBL進(jìn)行定位的的普通DIV，或者說只要將我們平時布局頁面的div的CSS屬性中加上position:relative后，就不只是用float布局頁面了，還可以用TRBL進(jìn)行布局頁面了，或者說加上position:relative的DIV也可以像普通的DIV進(jìn)行布局頁面了，只不過還可以用TRBL進(jìn)行布局頁面。但是position屬性為absolute不可以用來布局頁面，因?yàn)槿绻脕聿季值脑?，所有的DIV都相對于瀏覽器的左上角定位了，所以只能用于將某個元素定位于屬性為absolute的元素的內(nèi)部某個位置。
這樣我們就可以總結(jié)比較重要的結(jié)論：
屬性為relative的元素可以用來布局頁面，屬性為absolute的元素用來定位某元素在父級中的位置，既然屬性為absolute的元素用來定位某元素在父級中位置，就少不了TRBL，這時候根據(jù)一開始講的absolute的第三條，如果父級元素沒有position屬性那么absolute元素就會脫離父級元素，但是如果是布局頁面，父級元素position的屬性又不能為absolute，不然就會以瀏覽器左上角為原點(diǎn)了，所以父級元素的position屬性只能為relative！
總結(jié)：
如果用position來布局頁面，父級元素的position屬性必須為relative，而定位于父級內(nèi)部某個位置的元素，最好用absolute，因?yàn)樗皇芨讣壴氐膒adding的屬性影響，當(dāng)然你也可以用position，不過到時候計(jì)算的時候不要忘記padding的值。
新聞名稱：深入學(xué)習(xí)DIV+CSS布局之position屬性用法
新聞來源：http://m.5511xx.com/article/dhoiggo.html
