position 這個屬性決定了元素將如何定位。它的值大概有以下五種：
每個網頁都可以看成是由一層一層頁面堆疊起來的，如下圖所示。
position 設定為 relative 的時候，元素依然在普通流中，位置是正常位置，你可以通過 left right 等移動元素。會影響其他元素的位置。
而當乙個元素的 position 值為 absolute 或 fixed 的時候，會發生三件事：
把該元素往 z 軸方向移了一層，元素脫離了普通流，所以不再佔據原來那層的空間，還會覆蓋下層的元素。
該元素將變為塊級元素，相當於給該元素設定了 display: block;（給乙個內聯元素，如 ，設定 absolute 之後發現它可以設定寬高了）。
如果該元素是塊級元素，元素的寬度由原來的 width: 100%（佔據一行），變為了 auto。
由此觀之程式設計客棧，當 position 設定為 absolute 或 fixed，就沒必要設定 display 為 block 了。而且如果你不想覆蓋下層的元素，可以設定 z-index 值 達到效果。
下面來看一下外掛程式的引數用法示例：
1. position:static
所有元素的預設定位都是：position:static，這意味著元素沒有被定位，程式設計客棧而且在文件**現在它應該在的位置。
一般來說，不用指定 position:static，除非想要覆蓋之前設定的定位。
css code複製內容到剪貼簿
2. position:relative
如果設定 position:relative，就可以使用 top,bottom,left 和 right 來相對於元素在文件中應該出現的位置來移動這個元素。【意思是元素實際上依然佔據文件中的原有位置，只是視覺上相對於它在文件中的原有位置移動了】
css code複製內容到剪貼簿
3. position:absolute
當指定 position:absolute 時，元素就脫離了文件【即在文件中已經不佔據位置了】，可以準確的按照設定的 top,bottom,left 和 right 來定位了。
css code複製內容到剪貼簿
4. position:relative + position:absolute
如果我們給 div-1 設定 relative 定位，那麼 div-1 內的所有元素都會相對 div-1 定位。如果給 div-1a 設定 absolute 定位，就可以把 div-1a 移動到 div-1 的右上方。
css code複製內容到剪貼簿
5. 兩欄絕對定位
現在就可以使用相對定位和絕對定位來做乙個兩欄布局了。
css code複製內容到剪貼簿
6. 兩欄絕對定位定高
一種方案是給元素設定固定高度。但這種方案對大多數設計來說不太適合，因為一般我們不知道元素中會有多少文字，或者將要使用的精確的字型大小。
css code複製內容到剪貼簿
本文標題: 舉例詳解css中position屬性的使用
本文位址:
《CSS五》CSS中的定位型別position
未脫離文件流，即瀏覽器按照dom結構從上而下，從左而右對頁面進行渲染時，某元素按照順序出現在頁面中。脫離文件流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。普通定位就是從上到下從左到右依次排布的布局。普通流中的元素的位置由元素在 x html 中...
CSS的相對定位和絕對定位（position）
定位 position 故名思議，就是確定元素在頁面中的位置。css的常用定位有兩種，一種是相對定位，一種是絕對定位。下面我們看例子 id div0 id div1 id div2 有三個div，其中乙個大的 div0，裡面含有兩個子div，div1和 div2。可以看到，大的黃色 div0，巢狀了...
繼承關係舉例詳解
一 實現乙個名為person的類和它的子類employee，employee有兩個子類faculty和staff。具體要求如下 1 person類中的屬性有 姓名name string型別 位址address string型別 號碼telphone string型別 和電子郵件位址email str...