目錄：
1.static
2.relative
3.absolute
4.fixed
5.實驗：static, relative, absolute中，父元素-子元素高度關係
6.z-index
7.參考資料
1.static
2.relative
「relative」可以給元素設定位移（offset）「top、right、bottom和left」屬性。通過這些位移屬性設定可以給元素進行精確的定位。
仍∈文件流；
仍占用原預設位置（周邊元素也能看到其預設位置）；
相對定位元素的位移是相對於元素自身的邊緣。
給其巢狀標籤設定乙個新的參照點（建立新的定位環境）。
事實上，乙個相對定位元素同時設定了「top」和「bottom」位移屬性值，實際上「top」優先順序高於「bottom」。然而，乙個相對定位元素同時設定了「left」和「right」位移屬性，他們的優先順序取決於頁面使用的是哪種語言，例如，如果你的頁面是英文頁面，那麼「left」位移屬性優先順序高，如果你的頁面是阿拉伯語，那麼「right」的位移屬性優先順序高。
3.absolute
脫離文件流；
相對於最近的定位祖先/瀏覽器視窗元素。
簡單來說：
如果元素有乙個祖先，祖先的position設為 relative/ absolute/ fixed，元素將相對於祖先元素的邊定位；
若元素沒有包含在另乙個定位元素中，它將相對於初始包含塊（根html元素）定位。
一旦定位乙個元素，它將變為它包含的所有元素的新包含塊。轉變元素為包含塊的一種方法：position: relative; 但不設定偏移值來移動它。（也反映出，相對定位元素通常用於為絕對定位元素建立「定位環境」。）
若 elem 沒有設定盒子位移屬性，elem 的頂部、左部，會和設定了相對定位的父元素的頂邊、左邊重合。（多個elem會重疊）
若 elem 設定了盒子位移屬性，elem 會對於設定了相抵定位的祖先元素邊緣進行移位。
當乙個絕對定位的元素有固定的高度和寬度，並且盒子位移同時設定了「top」和「bottom」時，「top」更具優先組，另外和相對定位元素一樣，當同時設定了「left」和「right」時，優先順序取決於他的頁面使用的語言。
當乙個絕對定位的元素沒有明確指定高度和寬度，同時使用盒子位移的「top」和「bottom」屬性時，會使整個元素的高度跨越整個容器。同樣的，當這個元素同時使用位移「left」和「right」屬性值，會使整個元素的寬度跨越整個容器。如果同時使用位移四個屬性，可以指定乙個寬度和高度顯示元素。（這個時候絕對定位元素的寬度和高度都是100%。）
box-1 不指定height, width；
top: 10px; bottom: 10px; /* 同時使用top, bottom, 高度跨越整個容器 */
left: 10px; right: 10px; /* 同時適應left, right, 寬度跨越整個容器 */
適合於簡單的實際細節：e.g. 日期放在標題右下角；移除其包裝塊；說明文字放在**之上。
4.fixed
偏移值總是相對於瀏覽器視窗；即使該元素被放在另乙個 relative / absolute 定位的標籤裡也一樣。
固定元素總是可見，即便內容在滾動。
用於建立固定側邊欄，或者模仿html框架效果。
5.實驗：static, relative, absolute中，父元素-子元素高度關係
此例中，子元素 box-xx 設定height，父元素 box-set 不設定height。
父元素的高度由子元素高度撐起（子元素原始高度）
子元素 height: 40px;
子元素 height: 80px;
此例中，子元素 box-xx 設定height，父元素 box-set 不設定height。
父元素的高度由子元素高度撐起（子元素原始高度，與位移無關）
子元素 height: 40px;
子元素 height: 80px;
此例中，子元素 box-xx 設定height，父元素 box-set 也設定了height。
父元素的高度並非由子元素高度撐起；（absolute 元素脫離了文件流）
但二者之間存在聯絡：子元素是相對于父元素的邊緣進行位移
父元素 height: 200px; 子元素 height: 80px;
父元素 height: 200px; 子元素 height: 20px;
父元素 height: 100px; 子元素 height: 80px;
父元素 height: 10px; 子元素 height: 80px;
父元素 height: 0; 子元素 height: 80px;
6.z-index
z-index 表示定位元素在網頁上堆疊的順序。
一般情況，定位元素的堆疊順序是按照其html**順序進行的。e.g. 兩個絕對定位的，第二個會出現在第乙個的上層。
但，可以通過 z-index 來控制定位元素的堆疊順序。z-index 值越大，越處於頂層。
7.參考資料
html和css高階指南之二——定位詳解
視覺化程式設計學習筆記 實驗一
lresult callback winsunproc hwnd hwnd,handle to window uint umsg,message identifier wparam wparam,first message parameter lparam lparam second message...
Django筆記實戰
建立乙個新專案 django admin startproject myproject 專案名字 我們最初的專案結構由五個檔案組成 manage.py 使用django admin命令列工具的快捷方式。它由於執行 與我們專案相關的管理命令。我們將使用它來執行開發伺服器，執行測試，建立遷移等等。ini...
linux學習筆記（實驗樓） 挑戰1 尋找檔案
介紹 有乙個非常重要的檔案 sources.list 但是你忘了它在哪了，你依稀記得它在 etc 目錄下，現在要你把這個檔案找出來，然後設定成自己 shiyanlou 使用者 可以訪問，但是其他使用者並不能訪問。目標找到 sources.list 檔案 把檔案所有者改為自己 shiyanlou 把許...