position簡介
CSS屬性選擇用于定位元素的替代規則，被設計為對腳本動畫效果有用。是 CSS中常用的布局屬性之一。
取值
static
該關鍵字指定元素使用正常的布局行為，即元素在文檔流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
relative
該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。position:relative 未定義對 table-*-group, table-row, table-column, table-cell, table-caption 元素應用的效果。
absolute
不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。
fixed
不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的棧上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
關于inherit
在一開始查找position的相關資料中發現，有說position有五種取值的，即static 、relative、absolute、fixed、inherit。有說四種取值即static 、relative、absolute、fixed的。這。。。。
那inherit到底是不是position的取值呢?
我去查了下 MDN。
全局值是什么？我又去查了下w3c。原來是CSS-wide keywords. 即所有CSS屬性都接受的值。
好了，那看來屬于position的值只有static 、relative、absolute、fixed了。（sticky是一個實驗性的API，盡量不要使用它）
示例
我們來看看如何使用這四個屬性。
static
static，無特殊定位，它是html元素默認的定位方式，即我們不設定元素的position屬性時默認的position值就是static，它遵循正常的文檔流對象。
relative(相對定位)
還是在文檔流中，但是要動一下。怎么動呢？我來上代碼演示下。
我們看到1和2位置并沒有因為紅色方塊的變化為變化，還是處在原來的位置。
fixed(固定定位)
這個屬性是相對于viewport來定位的。
通過代碼可以看到，我將窗口調大后不管如何滾動紅色方塊都不會改變位置。當然fixed不在文檔流中。
absolute（絕對定位）
相對定位的元素并未脫離文檔流，而絕對定位的元素則脫離了文檔流。在布置文檔流中其它元素時，絕對定位元素不占據空間。絕對定位元素相對于最近的非 static 祖先元素定位。當這樣的祖先元素不存在時，則相對于根級容器定位。
下面的示例中，"Three" 元素不存在應用了定位的祖先元素，因此該元素相對于緊鄰的祖先（iframe 中的 <body> 元素）絕對定位。
等等，這是普通情況。我們來看一下極端點情況。
父類都沒有定位該相對于誰定位呢？我們來查下文檔w3c,通過文檔我們知道絕對定位的元素是相對于它的containing block來定位的。
所以上圖代碼中child在父類祖先類都沒有定位的時候是相對于它的包含塊定位的。
總結
- static 是默認值
- relative是相對自己定位的。
- fixed是相對于viewport 視口來定位的。
- absolute相對于最近的非 static 祖先元素定位的。如果祖先類都沒有定位則相對于包含塊定位。
position只是CSS布局中常用的屬性之一，但包含的內容確實不少。這是我的一些認識，如果有錯誤的地方還請各位多多指點。
