本文向大家簡(jiǎn)單介紹一下CSS中position屬性值的使用，主要包括static:默認(rèn)值，relative:相對(duì)定位，absolute:絕對(duì)定位三種，主要用于定位html元素的位置，并影響元素塊生成的方式，相信本文介紹對(duì)你一定會(huì)有所幫助。

CSS中position屬性值用法

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

static:默認(rèn)值

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

relative:相對(duì)定位

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

absolute:絕對(duì)定位

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

提示:

屬性值為absolute對(duì)象的z-index屬性可以設(shè)置層疊顯示的次序，它是直接有效的；而屬性值為relative對(duì)象的z-index屬性在設(shè)置時(shí)要小心，把當(dāng)前對(duì)象的z-index設(shè)置為-1是不行的，在firefox中它會(huì)無(wú)法顯示（注意，不是說瀏覽器有誤，而是指如果父對(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è)比它大的值即可。

【編輯推薦】

1. JavaScript巧解IE6至IE8兼容問題
2. CSS position屬性定義和用法
3. 解析兩大DIV CSS定位應(yīng)用
4. CSS屬性display:inline-block使用揭秘
5. Firefox、IE7、IE6瀏覽器兼容問題概念解析