CSS中position屬性值有哪些用法

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

CSS中position屬性值用法

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

static:默認(rèn)值

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

relative:相對(duì)定位

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

absolute:絕對(duì)定位

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

提示:

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

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