關於css position，來自mdn的描述：
css position屬性用於指定乙個元素在文件中的定位方式。top、right、bottom、left 屬性則決定了該元素的最終位置。然後來看看什麼是文件流(normal flow)，下面是 www.w3.org 的描述：
normal flowboxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. block-level boxes participate in a block formatting context. inline-level boxes participate in an inline formatting context.個人補充（此處參考fungleo的部落格文章，原文點此）：
normal flow直譯為常規流、正常流，國內不知何原因大多譯為文件流；
窗體自上而下分成一行一行，並在每行中按從左至右的順序排放元素；
每個非浮動塊級元素都獨佔一行， 浮動元素則按規定浮在行的一端，若當前行容不下，則另起新行再浮動；
內聯元素也不會獨佔一行，幾乎所有元素(包括塊級，內聯和列表元素）均可生成子行，用於擺放子元素；
有三種情況將使得元素脫離normal flow而存在，分別是 float，absolute ，fixed，但是在ie6中浮動元素也存在於normal flow中。
mdn的描述：
該關鍵字指定元素使用正常的布局行為，即元素在文件常規流中當前的布局位置。此時 top、right、bottom、left 屬性無效。個人補充：static是position的預設值。
12 322 23 24 25
26
27 28
對 content 的 position 設定 static 後，left就失效了，而元素（content）就以正常的 normal flow 形式呈現。
mdn的描述：
該關鍵字下，元素先放置在未新增定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未新增定位時所在位置留下空白）。position:relative 對 table-*-group, table-row, table-column, table-cell, table-caption 元素無效。個人理解：相對於normal flow中的原位置來定位。
12 333 34 35 36
37 38
39 40
41
42 43
這是沒有設定left、top等屬性時，正常出現在normal flow中的位置。
接著新增left、top：
1 .content_1
可以看到，元素（content_1）的位置相對於其原位置（normal flow中的正常位置）進行了移動。
mdn的描述
不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設定外邊距（margin），且不會與其他邊距合併。個人理解：生成絕對定位的元素，其相對於 static 定位以外的第乙個父元素進行定位,會脫離normal flow。注意：是除了static外
12 325 26 27 28
29
30 31
因為 content 的父元素 container 沒有設定 position，預設為 static，所以找到的第乙個父元素是 body（），可以看成是元素（content）相對於 body 向下移動10px。
mdn的描述
不為元素預留空間，而是通過指定元素相對於螢幕視口（viewport）的位置來指定元素位置。元素的位置在螢幕滾動時不會改變。列印時，元素會出現在的每頁的固定位置。fixed屬性會建立新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。個人理解：fixed相對於window固定，滾動瀏覽器視窗並不會使其移動，會脫離normal flow。
1這裡就不上圖了，看一下**或者自己動手碼一下就能理解。2 323 24 25 26
27
28 29
mdn的描述
盒位置根據正常流計算(這稱為正常流動中的位置)，然後相對於該元素在流中的 flow root（bfc）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 table時），該元素定位均不對後續元素造成影響。當元素 b 被粘性定位時，後續元素的位置仍按照 b 未定位時的位置來確定。position: sticky對 table元素的效果與 position: relative 相同。
因為各大瀏覽器對於sticky的相容問題，而且js也可以實現這個功能，在這裡就不進行深入了，了解一下就好。
w3school.com的 描述
規定應該從父元素繼承 position 屬性的值。inherit 繼承父元素，這個用得不多，所以也不繼續深入了。
**：
CSS Position 定位屬性
本篇文章主要介紹元素的position屬性，此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...
CSS Position 定位屬性
本篇文章主要介紹元素的position屬性，此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...
CSS Position 定位屬性
本篇文章主要介紹元素的position屬性，此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...