的position屬性指定用於一個元件（靜態的，相對的，固定的或絕對的）的定位方法的類型。
position屬性
該position屬性指定用於元素定位方法的類型。
有四個不同的位置值：
-
static -
relative -
fixed -
absolute
那麼元素使用上，下，左，右位置的屬性。 然而，除非這些屬性將無法正常工作position屬性設置第一。 他們還根據位置值的工作方式不同。
position: static;
HTML元素被定位默認靜態的。
靜態定位的元素不受頂部，底部，左側和右側的屬性。
一個元素position: static;未放置任何特殊方式; 它是根據頁面的正常流動總是定位：
這裡是用於CSS的：
position: relative;
與元素position: relative;相對於其正常位置被定位。
設置上，右，下，和相對定位的元素左屬性將導致其調整從正常位置移開。 其它內容將不會被調整為適合由元件留下任何間隙。
這裡是用於CSS的：
position: fixed;
一個元素position: fixed;相對於視，這意味著它總是停留在即使頁面滾動同一個地方被定位。 頂部，右側和底部，和left屬性用於將元件定位。
一個固定的元素沒有在它通常會被所在的頁面留下一個缺口。
注意在頁面的右下角固定的元素。 這裡是用於CSS的：
position: absolute;
一個元素position: absolute;相對於最近的定位的祖先被定位（而不是相對於視定位的，像固定）。
然而; 如果絕對定位元素沒有定位的祖先，它使用文檔的身體，而且隨著頁面滾動移動。
注： "positioned"元素是它的位置是什麼，除了static 。
下面是一個簡單的例子：
這裡是用於CSS的：
例
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
試一試» 重疊元素
當元件被定位，它們可以重疊的其他元素。
的z-index屬性指定的元素（其元素應該放在前面，或後面，其他）的堆疊順序。
一個元件可以具有正或負的疊層順序：
這是一個標題
因為圖像具有-1的z索引，它將被放置的文本之後。
以更大的堆疊順序的元素總是與一個堆疊順序較低的元素的前面。
 | 注意：如果兩個定位元素沒有重疊z-index指定，在HTML代碼放置最後的元素將在頂部。 |
|---|
定位文本在圖像
如何定位在圖像的文字：
更多示例
設置一個元件的形狀
這個例子演示了如何設置元素的形狀。 該元件被裁剪成這種形狀，並顯示出來。
如何使用滾動顯示溢出元素
這個例子演示了如何設置overflow屬性來創建一個滾動條時，元素的內容太大而不能在指定區域。
如何設置瀏覽器自動處理溢出
這個例子演示了如何設置瀏覽器來自動處理溢出。
更改光標
這個例子演示了如何改變光標。
自測練習用！
所有的CSS定位屬性
| 屬性 | 描述 |
|---|---|
| bottom | 設置底邊邊緣的定位的盒子 |
| clip | 剪輯絕對定位的元素 |
| cursor | 指定要顯示的光標的類型 |
| left | 設置左邊距邊緣的定位的盒子 |
| overflow | 指定在內容溢出元素框時會發生什麼 |
| overflow-x | 指定如何處理該內容的左/右邊緣是否溢出該元素的內容區域 |
| overflow-y | 指定如何處理內容的頂部/底部邊緣，如果它溢出元素的內容區 |
| position | 指定的定位的類型為一個元件 |
| right | 設置右邊距邊緣的定位的盒子 |
| top | 設置上邊距邊緣的定位的盒子 |
| z-index | 設置元素的堆疊順序 |