怎么在CSS中使用position屬性

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在CSS中使用position屬性，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營(yíng)產(chǎn)品：成都響應(yīng)式網(wǎng)站建設(shè)公司、成都品牌網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷推廣。我們專注企業(yè)品牌在網(wǎng)站中的整體樹(shù)立，網(wǎng)絡(luò)互動(dòng)的體驗(yàn)，以及在手機(jī)等移動(dòng)端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營(yíng)、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

【DIV+CSS布局之position屬性:absolute】

意思是：他的意思是絕對(duì)定位，他默認(rèn)參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡(jiǎn)稱TRBL)進(jìn)行定位，有以下屬性：
1)如果沒(méi)有TRBL，以父級(jí)的左上角，在沒(méi)有父級(jí)的時(shí)候，他是參照瀏覽器左上角,如果在沒(méi)有父級(jí)元素的情況下，存在文本，則以它前面的最后一個(gè)文字的右上角為原點(diǎn)進(jìn)行定位但是不斷開(kāi)文字，覆蓋于上方。

2)如果設(shè)定TRBL，并且父級(jí)沒(méi)有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。

3)如果設(shè)定TRBL，并且父級(jí)設(shè)定position屬性(無(wú)論是absolute還是relative)，則以父級(jí)的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL決定。即使父級(jí)有Padding屬性，對(duì)其也不起作用，說(shuō)簡(jiǎn)單點(diǎn)就是：它只堅(jiān)持一點(diǎn)，就以父級(jí)左上角為原點(diǎn)進(jìn)行定位，父級(jí)的padding對(duì)其根本沒(méi)有影響。

以上三點(diǎn)可以總結(jié)出，若想把一個(gè)定位屬性為absolute的元素定位于其父級(jí)元素內(nèi)，只有滿足兩個(gè)條件：

第一：設(shè)定TRBL

第二：父級(jí)設(shè)定Position屬性

上面的這個(gè)總結(jié)非常重要，可以保證你在用absolue布局頁(yè)面的時(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)致頁(yè)面布局錯(cuò)位。

【DIV+CSS布局之position屬性:relative】

意思是相對(duì)定位，他是默認(rèn)參照父級(jí)的原始點(diǎn)為原始點(diǎn)，無(wú)父級(jí)則以文本流的順序在上一個(gè)元素的底部為原始點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)父級(jí)內(nèi)有padding等CSS屬性時(shí)，當(dāng)前級(jí)的原始點(diǎn)則參照父級(jí)內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位，有以下屬性：

1)如果沒(méi)有TRBL，以父級(jí)的左上角，在沒(méi)有父級(jí)的時(shí)候，他是參照瀏覽器左上角(到這里和absolute第一條一樣)，如果在沒(méi)有父級(jí)元素的情況下，存在文本，則以文本的底部為原始點(diǎn)進(jìn)行定位并將文字?jǐn)嚅_(kāi)(和absolut不同)。

2)如果設(shè)定TRBL，并且父級(jí)沒(méi)有設(shè)定position屬性，仍舊以父級(jí)的左上角為原點(diǎn)進(jìn)行定位(和absolut不同)

3)如果設(shè)定TRBL，并且父級(jí)設(shè)定position屬性(無(wú)論是absolute還是relative)，則以父級(jí)的左上角為原點(diǎn)進(jìn)行定位，位置由TRBL決定(前半段和absolut一樣)。如果父級(jí)有Padding屬性，那么就以內(nèi)容區(qū)域的左上角為原點(diǎn)，進(jìn)行定位(后半段和absolut不同)。

以上三點(diǎn)可以總結(jié)出，無(wú)論父級(jí)存在不存在，無(wú)論有沒(méi)有TRBL，均是以父級(jí)的左上角進(jìn)行定位，但是父級(jí)的Padding屬性會(huì)對(duì)其影響。

綜合上面對(duì)relative的敘述，我們就可以將position屬性為relative的DIV視成可以用TRBL進(jìn)行定位的的普通DIV，或者說(shuō)只要將我們平時(shí)布局頁(yè)面的div的CSS屬性中加上position:relative后，就不只是用float布局頁(yè)面了，還可以用TRBL進(jìn)行布局頁(yè)面了，或者說(shuō)加上position:relative的DIV也可以像普通的DIV進(jìn)行布局頁(yè)面了，只不過(guò)還可以用TRBL進(jìn)行布局頁(yè)面。但是position屬性為absolute不可以用來(lái)布局頁(yè)面，因?yàn)槿绻脕?lái)布局的話，所有的DIV都相對(duì)于瀏覽器的左上角定位了，所以只能用于將某個(gè)元素定位于屬性為absolute的元素的內(nèi)部某個(gè)位置。

這樣我們就可以總結(jié)比較重要的結(jié)論：

屬性為relative的元素可以用來(lái)布局頁(yè)面，屬性為absolute的元素用來(lái)定位某元素在父級(jí)中的位置，既然屬性為absolute的元素用來(lái)定位某元素在父級(jí)中位置，就少不了TRBL，這時(shí)候根據(jù)一開(kāi)始講的absolute的第三條，如果父級(jí)元素沒(méi)有position屬性那么absolute元素就會(huì)脫離父級(jí)元素，但是如果是布局頁(yè)面，父級(jí)元素position的屬性又不能為absolute，不然就會(huì)以瀏覽器左上角為原點(diǎn)了，所以父級(jí)元素的position屬性只能為relative！

上述就是小編為大家分享的怎么在CSS中使用position屬性了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)名稱：怎么在CSS中使用position屬性
網(wǎng)站網(wǎng)址：http://muchs.cn/article0/gphoio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站收錄、響應(yīng)式網(wǎng)站、云服務(wù)器、網(wǎng)站維護(hù)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)