CSS中三大position屬性值用法解讀
本文向大家簡(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ì)象所在文檔流中的位置，也就是說(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è)比它大的值即可。
【編輯推薦】
