CSS position 位置屬性（定位）

CSS position 位置屬性是用來設定元素位置的語法，你可以定義出某個元素（如圖片、DIV 區塊、h1、h2 ... 等）要在網頁的哪個位置呈現，例如將一個圖片設置在網頁的左上角，使用 CSS position 通常必須搭配 left、top 等屬性，讓瀏覽器知道網頁元素要靠左邊多遠以及靠上面多遠，另外也可以搭配 z-index 製作出圖片疊在一起的效果，絕大多數的主流瀏覽器都支援 CSS 的 position 位置屬性效果。

CSS position 位置屬性語法

position: 位置參數;

CSS position 屬性可以設定的位置參數值有 absolute、fixed、relative、static、inherit 等，這幾個參數值各有其特色，條列如下。

• absolute：絕對位置，當網頁往下拉時，元素也會跟著改變位置，其元素的位置由 top、left、right、bottom 所決定。
  
• fixed：元素位置固定，相對於瀏覽器而定位，其元素的位置由 top、left、right、bottom 所決定。
• relative：相對位置，相對於其它元素的位置，其元素的位置由 top、left、right、bottom 所決定。
• static：這就是預設值，如果設定 position 為 static，則 top、left、right、bottom 會被忽略。
• inherit：繼承自父層 position 定位屬性的值。

請注意目前的 IE 瀏覽器（版本 11.0）以及更舊版本的 IE 瀏覽器並不支援 inhert 屬性值，未來的新版本不知道會不會支持，若您的網頁目標瀏覽用戶會使用 IE 瀏覽器進行瀏覽，建議不要使用 inhert 屬性值，接著請看 CSS position 的幾個實際應用範例。

CSS position 位置屬性應用範例一、修改一個段落的位置

p {
　position:absolute;
　top:80px;
　left:80px
}

範例中，我們設定了網頁的 <p> 元素 position 為 absolute（絕對位置），距離上方 80px（top:80px;），距離左方 80px（left:80px;），由於是絕對位置，所以這個元素並不會因為其它的區塊變化而改變位置。由於範例簡單的程式碼並未與其它網頁元素有所關連，所以 P 元素僅會根據螢幕的邊框計算自己要呈現的位置，如果要與其它網頁元素有所關連，請看範例二，我們用兩個 DIV 區塊來呈現。

CSS position 位置屬性應用範例二、兩個 DIV 區塊的位置關係

<style type="text/css">
<!--
#DIV_BIG{
    width:300px;
    height:200px;
    background-color:#FFB326;
    position:relative;
}
#DIV_SMALL{
    width:120px;
    height:100px;
    background-color:#78FF78;
    position:absolute;
    top:20px;
    left:40px;
}
-->
</style>
<div id="DIV_BIG">
    <div id="DIV_SMALL"></div>
</div>

呈現效果

範例二所顯示的是兩個 DIV 區塊間的位置關係，橘色大的 DIV 區塊的位置設定為「position:relative;」，主要目的是讓裡面的綠色小區塊在使用「position:absolute;」時，可以根據橘色的大 DIV 區塊邊框來顯示位置，這樣兩個 DIV 區塊彼此間才會有所關連，否則區塊會根據父層或螢幕為基準。以範例二的綠色小區塊來說，因為是根據橘色大區塊來呈現位置，並將 position 設為 absolute，所以當我們移動橘色大區塊的位置時，綠色小區塊也會跟著被移動，而且兩個區塊彼此間的位置是不會改變的。

善用 CSS position 的 relative 與 absolute 這兩個屬性質，在網頁元素的位置配置上非常重要。

有了 CSS position 位置屬性的功能，網頁設計師就可以很輕易的將網頁元素放在要放的位置，例如網站 LOGO 的位置、網頁內圖片所要顯示位置、影片播放區塊、表單的位置 ... 等，應用相當的廣泛。