CSS z-index 超強，多張圖片也能依序重疊在一起
所謂的 CSS z-index 屬性是用來設計關於垂直於螢幕方向的層次，例如兩個 DIV 區塊，想要讓他們呈現出堆疊在一起的效果，用 z-index 屬性就對了，同樣的概念也可以用在網頁圖片上呢！例如兩張圖片的堆疊、三張圖片的堆疊、四張圖片的堆疊 ... 更多張圖片的堆疊，只要用 z-index 個別設定圖片（img tag）在垂直螢幕方向的位置關係即可。
假設我們現在有三張圖片，第一張圖片的 z-index 設定為 -1、第二張圖片的 z-index 設定為 0、第三張圖片的 z-index 設為 1，請問這三張圖片會怎麼堆疊？答案很簡單，若從側面看會是這樣：
第三張圖片（z-index:1）
第二張圖片（z-index:0）
第一張圖片（z-index:-1）
我們看螢幕上的三張圖就像上述範例從上方往下看，首先會看到第一張圖，蓋在下面的是第二張圖，最底層則為第三張圖，如果你對這樣的空間解說無法理解，這裡有一個類似的效果參考一下。
這三張圖片排列得很漂亮，是因為還有搭配了 CSS 的 position 屬性調整每張圖片的位置，WebTech 網站上有這三張圖片堆疊效果的範例語法，難度並不會太高，請參閱以下的 WebTech 的說明網頁內容，應該學得會。
實際上並不是所有的美工設計都只採用 photoshop 或 gimp 來做，偶爾為了效能或多變化，可以採用 CSS 的 z-index 屬性直接寫相對關係，也可以呈現出相當優美的效果。
假設我們現在有三張圖片，第一張圖片的 z-index 設定為 -1、第二張圖片的 z-index 設定為 0、第三張圖片的 z-index 設為 1，請問這三張圖片會怎麼堆疊？答案很簡單，若從側面看會是這樣：
第三張圖片（z-index:1）
第二張圖片（z-index:0）
第一張圖片（z-index:-1）
我們看螢幕上的三張圖就像上述範例從上方往下看，首先會看到第一張圖，蓋在下面的是第二張圖，最底層則為第三張圖，如果你對這樣的空間解說無法理解，這裡有一個類似的效果參考一下。
實際上並不是所有的美工設計都只採用 photoshop 或 gimp 來做，偶爾為了效能或多變化，可以採用 CSS 的 z-index 屬性直接寫相對關係，也可以呈現出相當優美的效果。