使用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）
CSS定位position的理解
如一本書上所說，定位的原理很簡單。利用定位，可以準確地定義元素框相對於其正常位置應該出現在 或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。定位包含4種不同的型別會影響元素框生成的方式 position static relative absolute fixed inherit static...
position定位屬性理解
html 元素的預設值，即沒有定位，遵循正常的文件流物件 靜態定位的元素不會受到 top,bottom,left,right影響 如果沒有定位偏移量，那麼對元素本身沒有任何影響 不使元素脫離文件流 不會影響其他元素布局 left,right,top,bottom是相對於當前元素自身進行偏移的 使元素...
理解浮動和position定位
為了更好理解浮動和position，建議先看看我寫的這篇文章 html文件流和文件物件模型dom理解 css設計float屬性的主要目的，是為了實現文字繞排的效果。然而，這個屬性居然也成了建立多欄布局最簡單的方式。如何浮動乙個元素？先設定其寬度width，再增加樣式規則float left righ...