CSS之position屬性

本文主要為大家分享一篇CSS之position屬性，具有很好的參考價值，希望對大家有幫助。一起跟著小編過來看看吧。

(1)、static 
可以認為靜態的，預設元素都是靜態的定位，物件遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

(2)、relative 
相對定位，物件遵循常規流，並且參考自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

(3)、absolute 
a、絕對定位，物件脫離常規流，此時偏移屬性參考的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不會影響常規流中的任何元素，其margin不與其他任何margin折疊。

b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。

(4)、fixed 
固定定位，與absolute一致，但偏移定位是以視窗為參考。當出現捲軸時，物件不會隨著滾動。

(5)、center 
與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。 （CSS3）

(6)、page 
#與absolute一致。元素在分頁媒體或區域區塊內，元素的包含區塊始終是初始包含區塊，否則取決於每個absolute模式。 （CSS3）

(7)、sticky 
#物件在常態時遵循常規流。它就像是relative和fixed的合體，當在螢幕中時按常規流排版，當捲動到螢幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。 （CSS3） 

#相關推薦：

CSS中position屬性

css:position屬性

#Css中Position屬性的意義

#

以上是CSS之position屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！