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 的位置、網頁內圖片所要顯示位置、影片播放區塊、表單的位置 ... 等,應用相當的廣泛。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C