這篇文章給大家介紹CSS中position屬性值有哪些用法，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)建站服務(wù)項目包括瓜州網(wǎng)站建設(shè)、瓜州網(wǎng)站制作、瓜州網(wǎng)頁制作以及瓜州網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，瓜州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到瓜州省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

CSS中position屬性值用法

CSS中position屬性有4種可選值:static,relative,absolute,fixed,用于定位html元素的位置，并影響元素塊生成的方式。這里我們重點(diǎn)看一下position屬性的三個取值定義：position:static、absolute、relative。

static:默認(rèn)值

如果沒有指定position屬性值，支持position屬性的html對象都是默認(rèn)為static，可以這么理解：把html頁面看作一個文檔流，源代碼中各個標(biāo)簽的先后位置就是它們所對應(yīng)的對象的呈現(xiàn)次序，所有取值為static的對象都按照你所編寫的html標(biāo)簽的順序依次呈現(xiàn)。

relative:相對定位

此position屬性值保持對象所在文檔流中的位置，也就是說它具有和static相同的呈現(xiàn)方式，它同樣占有在文檔流中的固定位置，后面的對象不會侵占或覆蓋；與static屬性值不同的是，設(shè)置了relative的對象，可以通過top,left,right,bottom屬性設(shè)定自己的新顯示位置，這4個屬性的取值是相對于文檔流的前一個對象的，你可以自由設(shè)置這4個屬性偏移到新的位置而不對文檔流中的其他對象產(chǎn)生任何影響，原來的頁面呈現(xiàn)仍然會我行我素.

absolute:絕對定位

和relative不同的是，這個position屬性值會將當(dāng)前對象拖出文檔流，后面的對象會占有原來的位置，也就是說，當(dāng)前對象的呈現(xiàn)是獨(dú)立顯示的，但是它的位置在指定top,left,right,bottom任一屬性之前仍是有繼承性的，這時的4個屬性的取值是相對于瀏覽器的，和文檔流無關(guān)了。如果把示例中的B區(qū)域設(shè)定為absolute而不指定4個位置屬性，通過設(shè)定margin來改變它的相對位置，用這個方法可以解決前面提到的問題2。

提示:

屬性值為absolute對象的z-index屬性可以設(shè)置層疊顯示的次序，它是直接有效的；而屬性值為relative對象的z-index屬性在設(shè)置時要小心，把當(dāng)前對象的z-index設(shè)置為-1是不行的，在firefox中它會無法顯示（注意，不是說瀏覽器有誤，而是指如果父對象是根元素body，那么z-index是無效的，任何z-index設(shè)置都不會顯示在根元素之后，除了IE的解析bug，感謝#19提示），必須設(shè)置為0以上，我們?nèi)绻胱寗e的對象擋住它，只有將其他對象也設(shè)置position為relative，并將z-index屬性取一個比它大的值即可。

關(guān)于CSS中position屬性值有哪些用法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。