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屬性的含義