CSS z-index 語法範例

CSS z-index 語法的用途是控制 z 軸的位置,這個需要一點空間的概念來解釋,假設面對電腦螢幕,左右方向為 x 軸,上下則為 y 軸,則面對自己的這個方向就是 z 軸囉!z-index 的值越大,代表離自己越靠近。相反的,z-index 的值如果越小,就代表離自己越遠囉!

光是使用 z-index 語法其實還不足以製做出區塊或圖片的堆疊效果,因為 z-index 僅能設定區塊的 z 軸位置,還必須搭配上 position 語法來設定區塊的位置,才能做出疊在一起的效果,以下範例就是 z-index 與 position 的簡單特效。

CSS z-index 基本語法
z-index: 屬性值;
CSS z-index 的屬性值共有三種選擇,分別是 auto、數字以及 inherit,屬性效果如下
  • z-index:auto; // 預設值,推疊的順序與父層一樣。
  • z-index:number; // 根據 number 決定堆疊順序,數字越大代表越上層。
  • z-index:inherit; // 繼承自父層的堆疊順序
舊版本的 IE 瀏覽器(例如 IE8)並不支援 inherit 屬性值,不建議使用。

CSS z-index 範例一、與 position 搭配範例
<style type="text/css">
img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}
</style>
這裡是文字介紹<img src="範例圖片">
呈現效果
這裡是文字介紹
範例一是個典型的 CSS z-index 應用,總共有兩個不同的元素,分別為文字以及圖片,我們透過 position 將圖片位置控制在左上角,但是預設的情況下,圖片與文字都在同一個平面,所以會互相推擠,這時候我們運用 CSS z-index 屬性的效果,將圖片的 z 軸位置設為 -1,讓圖片墊在文字底下,就會變成像範例的呈現結果這樣囉!好玩的還不只這樣,我們可以利用這樣的特性,一次設定多個 DIV 區塊的 z-index 來達成多區塊重疊的效果,請看範例二的實際效果。

CSS z-index 範例二、多張區塊重疊效果
<style type="text/css">
#p1{
    position:absolute;
    top:10px;
    left:10px;
    width:150px;
    height:150px;
    background-color:#00dc03;
    z-index:1;
}
#p2{
    position:absolute;
    top:20px;
    left:20px;
    width:150px;
    height:150px;
    background-color:#fdff55;
    z-index:2;
}
#p3{
    position:absolute;
    top:30px;
    left:30px;
    width:150px;
    height:150px;
    background-color:#ff1c19;
    z-index:3;
}
</style>
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>
呈現結果
注意看三個彩色的方型區塊疊在一起的效果,每個方型區塊靠上方與靠左邊的位置都不一樣,但是都是設為絕對位置,搭配 z-index 設定不同的值(分別是 1、2、3)而產生的效果。

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