CSS中position屬性值有哪些用法

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

CSS中position屬性值用法

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

static:默認值

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

relative:相對定位

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

absolute:絕對定位

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

提示:

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

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