最近覺得自己講話、描述越來越不清楚，所以想找幾個曾經沒足夠能力用口頭來描述的概念，用文章的方式重整一下自己的條理。

今天的主題是 css 定位模型，主要範例為此網站　http://www.barelyfitz.com/screencast/html-training/css/positioning/

他內容有十個 tab 幾乎將所有較可能發生的情況都舉了一次例子，所以是一個適合說明的範例。

我想要用兩種方式描述，一種是整理成簡短適合口頭介紹 定位模型的解釋。

另一種是完整定義清楚的解釋。

CSS 定位最主要的屬性為 positive，可以設定的值分別為 static、reletive、absolute，另外則是可搭配 float 來延伸更多效果。

定位元件的基礎前提是需為區塊等級的元素，如 div 則為預設區塊的標籤，範例裡的 html 結構有幾個元素，結構如下所示

<div id="id-before"></div>
<div id="id-1">
<div id="id-1a"></div><div id="id-1b"></div><div id="id-1c"></div>
</div>
<div id="id-after"></div>

在此先定義承載區域，因為定位有分成絕對定位跟相對定位，皆可依照設定微調其位置，而其參考的位移來源則為承載區域，意思即是說，如果我現在要定位到 上 0px  左 0px 的地方，那這個 (0,0) 指的是從哪個元素算起呢？這就要看他承載區域是哪個元素了。

預設的承載區域是 root 就是 html，而其他的情況則要看該元素的定位方式為何囉，元素設定不同的定位方式會影響其承載區域元素。

如果是相對定位，則承載區域就是在他前面的元素或者是上層的元素，就是按照經驗來看他原本會排在哪，就是哪囉，這蠻直覺的。

如為絕對定位，則其承載區域為最靠近的父元素且不為靜態定位的元素。

因為靜態定位是預設定位方式，所以換句話說，如果我 id-1a 是絕對定位，則要不斷往上追溯他哪個上層元素有被改過定位方式的元素，如果都沒有找到則為 html 元素囉。

所以如果我把 id-1a 設了絕對定位以後，想要調整其 (0,0) 所在的位置，則找到想要他貼著哪個元素，則把該元素的定位設為 relative 即可作用囉。

接下來描述範例裡面的幾個情況：

1. 全為靜態定位，就依照區塊模式的定義，每個元素換行堆疊下來。
2. id1 設為相對定位，所以就依照他原本的位置位移了設定的值囉。
3. 在此由於  id-1a 的上層元素都沒有修改定位方式，所以 都參考到 整個瀏覽器視窗大小的 html 元素了。
4. 這個例子剛好說明，如果 id1 有修改定位方式，則為 id-1a 的承載區域了。
5. 這是一個兩欄的範例，但如果用絕對定位來實作則會造成一種現象，他不佔空間了，所以 id 1 瞬間就扁掉了。所以 after 就跑到 id1 原本的位置去了，所以就被遮住了…另外一提如果要讓他浮出來可以設 z-index，但是設 z-index 的前提是他要被修改過定位方式。
6. 如同上例所說，所以強制設定他的高度，看起來就會正常許多，但是會遭遇到沒辦法自動延長的狀況。
7. 浮動定位，常用在文繞圖的情況，如此例。
8. 如果要解決自動延伸內容的情況，有時會用浮動來做兩欄，但是一樣有浮動不佔空間的問題。
9. 但是有一特殊屬性 clear 可以解決， clear 可以讓元素左右都沒有 float 元素，所以就會自動被推下去了。

哪到底要怎麼簡單的說哩～

如果你想要讓 div 可以依照內容自動延伸，那你的容器最好是相對定位，因為他才會站空間，或者用 float 加上 clear 來做。