定位

通過使用position屬性，可以選擇4種不同型別的定位：static，absolute，fixed，relative。預設值即static。主要介紹absolute以及relative值的特性，fixed與absolute類似，只是它的包含塊預設為瀏覽器。
與浮動一樣，定位也需要考慮其包含塊。

absolute

絕對定位，首先要明確，絕對定位的元素將會從文件流中完全刪除，然後元素會根據top、left、right以及bottom相對於其包含塊進行定位。由於元素完全從文件流中刪除，元素本來在正常文件留中所佔的空間會關閉，就好像其從來沒有存在過。
並且，與浮動一樣，絕對定位後的元素會生成一個塊級框，而不論其原來在正常文件流中是塊級元素還是行內元素

可見，為了準確的找到絕對定位元素的正確位置，確定其包含塊是關鍵。我們知道，浮動元素的包含塊就是離其最近的塊級祖先。但是絕對定位的包含塊就不是那麼簡單了。

包含塊

CSS2.1定義了不同型別元素的包含塊確定方式：

1. 對於“根元素”，其包含塊即初始包含塊，由使用者代理建立，在大多數瀏覽器中初始包含塊就是視窗；
2. 對於“非根元素”，若元素的position是static或者relative，那麼元素的包含塊是離其最近的塊級框、表單元格或者行內塊祖先框的內容邊界構成。這句話中包含很多資訊，“最近的”，“塊級框”，“表單元格”，“行內塊祖先框”，“內容邊界”。所以前文所說的浮動元素的包含塊，準確的說法應該是如此
   。
3. 對於“非根元素”，若position的值是absolute，其包含塊是離其最近的position值不是static的祖先元素（無論是塊級元素還是行內元素，無論是relative還是absolute）。但是，若包含塊是塊級元素，則包含塊設定為該元素的內邊距界，若包含塊是行內元素，則包含塊設定為該元素的內容邊界。這點要注意！顯然，若沒有position非static的祖先，則其包含塊為初始包含塊。

偏移

top、right、bottom、left用於指定定位元素相對於其包含塊4條邊界的偏移值。顯然若值為正值，則會向著內部偏移，若為負值，會向外偏移，即，與浮動設定負的外邊距一樣，定位元素也可以使用負的偏移使元素定位到其包含塊的外面。

顯然，利用top、right、bottom、left可以隱式的確定元素的width和height屬性，

{
    top:0px;
    left:0px;
    bottom:0px;
    right:50%;
}

如上述程式碼即可使元素填滿包含塊的左半部分。

這裡需要注意這些偏移值設為auto時的行為，CSS2.1規範指出，若偏移量設為auto，定位元素的各邊會與其靜態位置對齊。靜態位置即元素未定位之前的位置。

過度限制

很顯然，當對元素的各項屬性都顯式指定時，有可能會過度限制（無法滿足所有的屬性值）。
一般的，元素的大小和位置取決於其包含塊，以及各個屬性的值，當然最主要還是取決於包含塊。元素的擺放應當複合以下等式：
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = 包含塊的width
考慮下面幾種情況：

1. left，right，width均為auto時，元素應當置於其靜態位置處，並且其width會進行恰當收放，保證寬度只能恰好包含其內容

<p>This is <span>test for <em>absolute!</em>Yes,we can.</span></p>

p
{
    position:relative;
    background-color: silver;
}
p em
{
    position: absolute;
    right: auto;
    width:auto;
    left: auto;
    background-color: red;
}

效果如圖所示：

絕對定位的em元素被放置在其靜態位置處（但是注意，由於絕對定位的元素已經從文件流中刪除，所以後面的正常流會填在這裡，所以會發送覆蓋的現象），width正好容下其內容，而right則是計算的剩下的距離。
2. 一般的，如果只有一個屬性設為auto，使用者代理會自動計算並修改該屬性的值來滿足前面的等式。

Z-index

顯然，絕對定位可能會遇到多個元素試圖放置在同一塊區域，誰上誰下，這就是z-index屬性來控制的。
z-index的屬性值是個十進位制的數字（可以為負數），值越大離使用者越近。預設為auto，當為元素指定了任意z-index值（非auto），則該元素就會建立自己的區域性疊放上下文，auto表示該元素的層次與其父框相同，並且，該元素不會建立新的區域性疊放上下文。使用者代理可以將auto處理為z-index=0.

注意：z-index的屬性值都是相對於自己所在的疊放上下文，如下例子：

<div>
    <img src="0.jpg" alt="bigface">
    <p>I have a <em>big</em> face!</p>
</div>

div
{
    position: relative;
    background-color: silver;
}
img
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}
p
{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
p em
{
    position: absolute;
    top:auto;
    left: auto;
    z-index: 20;
}

雖然em元素的z-index值為20，但是他仍然被img覆蓋，這是因為em元素的z-index屬性是相對於其所在的疊放上下文即p元素而言的，而p元素的z-index值為1，img為2，可以這麼理解，em的z-index值為（1，20）。
即：
img：2
p：1
p em：1，20

這樣比較容易理解！

相對定位

相對定位比較簡單，需要注意的是相對定位是相對於元素的靜態位置的偏移，但是元素本來的生成框不會消失：

<p>I have a <em>big</em> face!</p>

p
{
    background-color: red;
}
p em
{
    position: relative;
    left: 20px;
}

效果如下：

可以發現相對定位後em元素本該出現的位置留出了空白。

固定定位

固定定位與絕對定位相似，position為fixed時，區別在於，固定定位的包含塊預設為瀏覽器視窗。
諸如CSDN網站介面的

這種圖示，都是固定定位實現。