CSS position 位置屬性

CSS position 位置屬性自然就是用來設計網頁元素位置用的，例如有一張圖片要放在網頁的左上角，就是經常用來放網站 Logo 的那個位置，這時候使用 CSS position 屬性非常方便，position 搭配 top、left 兩個屬性，可以快速的控制圖片靠上面與靠左邊的位置，如果有多的 DIV 區塊互相包在一起，也可以透過 position 來調整彼此之間的位置關係唷！所以 CSS position 位置屬性非常的好用。

CSS position 屬性語法規則
position: 參數;
CSS position 有好幾種不同的參數值可以使用，特別是將元素設為絕對位置的 absolute 與設為相對位置的 relative 這兩個參數值，還有哪些參數值可以使用呢？條列給各位參考。
  • position:absolute; // 絕對位置
  • position:relative; // 相對位置
  • position:fixed; // 固定位置
  • position:static; // 預設值
  • position:inherit; // 繼承自父層的 position 屬性值
以上幾種 position 控制位置的參數值，全部都必須搭配 top、left、bottom 或 right 屬性來控制網頁元素的位置與相對邊框的距離。

CSS position 屬性參考範例一、控制網頁 Logo 圖片的位置
<img src="your logo image url" style="position:absolute;top:15px;left:10px;">
範例一應該是許多網頁設計師常用到的技巧，其中「your logo image url」是圖片的網址，這個部份應該算是基礎，如果對於網業如何使用圖片不清楚，請參閱 Wibibi 的這篇《HTML img 圖片標籤》內容。我們還是把重點擺在 CSS 的 position 屬性效果，在這裡使用了 absolute 屬性值，代表圖片要以網頁邊框為基礎計算位置，至於要距離網頁邊框多遠，就是用 top 與 left 來決定，以範例一來說，圖片的位置會靠網頁上方 15px 並靠左邊 10px。

範例一的 img 是指沒有提他影響因素在內的情況，若有其它的網頁元素也使用 position 控制，圖片位置可能會有所影響。

CSS position 屬性參考範例二、控制兩個 DIV 區塊的位置
<div style="width:200px;height:200px;border:2px red solid;position:absolute;top:10px;left:10px;"></div>
<div style="width:200px;height:200px;border:2px black solid;position:absolute;top:30px;left:30px;"></div>
呈現效果

假設範例一的圖片位置設計技巧已經沒問題了，範例二就讓各位看看如何透過 CSS position 來控制網頁中 DIV 區塊的位置，我們準備了兩個 DIV 區塊，第一個是紅色的邊框，第二個是黑色的邊框，在預設的情況下，這兩個 DIV 區塊應該會從上往下依序排列，那為什麼最後變成兩個疊在一起呢？主要是因為兩個 DIV 區塊都採用了 CSS position 的屬性效果，位置都是絕對位置 absolute，只是紅色區塊與黑色區塊距離上方及左方的距離有所差異而已，這就是絕對位置的效果，強制 DIV 區塊在特定的位置。

備註、很多人以為這種技巧是設計區塊重疊的技巧，其實不是的，CSS 設計圖片或區塊堆疊效果的標準屬性是 z-index，如果你有興趣了解，可以閱讀這一篇的介紹：CSS z-index 語法使用範例。

還有更多相關技巧
© Copyright webtech.tw Since 2010