使用css布局position非常重要，語法如下：

position：static | relative | absolute | fixed | center | page | sticky

默認值：static，center、page、sticky是CSS3中新增加的值。

(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）

理解position定位