語法
-
position：static | relative | absolute | fixed | center（CSS3）| page（CSS3）| sticky（CSS3）| inherit
-
預設值：static
-
適用於：除display屬性定義為table-column-group | table-column之外的所有元素
-
繼承性：無
-
動畫性：否
-
計算值：指定值
-
媒體：視覺
說明
-
static：每一個元素都有一個預設的position值，那就是static，元素將會嵌入在正常的文件流裡。此時，儘管你為該元素設定了left/right/top/bottom屬性，但對於該元素來說，均沒有效果。
-
relative：1）物件遵循常規流，並且參照自身在常規流中的位置通過top、right、bottom、left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素；2）隨便給元素新增relative屬性而不設定定位偏移則相當於未進行任何設定，但是卻可以作為子absolute元素的父級定位元素。
-
absolute：1）物件脫離常規流，即盒子的偏移位置不影響常規流中的任何元素；2）此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素；3）其margin不與其他任何margin摺疊。
-
fixed：1）與absolute一致，但偏移定位是以視窗為參考；2）當出現滾動條時，物件不會隨著滾動。
-
center：與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。 -
page：與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決於每個absolute模式。 -
sticky：物件在常態時遵循常規流。它就像是relative和fixed的合體，當在螢幕中時按常規流排版，當捲動到螢幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。 -
inherit: position值不會級聯(doesn’t cascade, 不會直接影響到子元素), 所以這個值可以強制它從父元素繼承position值.
概念說明 文件流：從左到右，自上而下，結合元素塊狀和內聯屬性的預設位置擺放形式。
解讀
absolute
- 其中對於
absolute一直有一個誤解：absolute是相對定位，相對必然要有一個相比較的物件，之前一直認為是其最近的relative父元素，今天看到某一篇文章後才知道這其實是錯誤的。正確的答案是absolute相比較的物件是其最近的非static父元素，也就是說父元素如果是absolute或fixed定位，那麼也是有效的相對定位父級元素。 - 如果一個元素的position屬性被設定為absolute, 那麼這個元素的父元素將認為這個子元素根本不存在。和未進行clear的浮動元素一樣，不能撐起父元素高度。
fixed
正如前面所說過的, fixed非常類似於absolute, 它能幫助你定位你的元素在文件的任何地方, 然而, fixed不受滾動條的影響。