用 CSS z-index 設計多張圖片重疊的效果

用 CSS 的 z-index 設計多張圖片重疊的效果，需要用到 CSS 的位置屬性 position 以及 z-index 本身的參數設定，position 是用來控制圖片在電腦螢幕平面的位置，而 z-index 則是用來控制與電腦螢幕垂直方向的位置，感覺就像是把圖片堆疊在一起，基本上現在新的主流瀏覽器只要是支援 CSS position 以及 z-index 屬性，都可以正常呈現出圖片重疊的效果，這裡提供一個簡單的範例給各位參考。

用 CSS z-index 設計多張圖片重疊的效果範例
<style type="text/css">
#P1{
    position:absolute;
    top:0px;
    left:0px;
    z-index:-1;
}
#P2{
    position:absolute;
    top:20px;
    left:20px;
    z-index:0;
}
#P3{
    position:absolute;
    top:40px;
    left:40px;
    z-index:1;
}
</style>
<div style="position:relative;">
<img src="第一張圖片" id="P1">
<img src="第二張圖片" id="P2">
<img src="第三張圖片" id="P3">
</div>
呈現的效果
範例總共有三張圖片，我們利用圖片 id 來套入個別的 CSS 語法，首先看 P1 這張圖片，位置 position 設為絕對位置（absolute）且靠左邊與靠上面都是 0px，第二張圖片與第三張圖片也都使用了絕對位置來設定，根據圖片預設的排列順序，本來就會是 P1 在最下層、P2 在中間、P3 在最上層，不用寫 z-index 也可以有這種效果，但如果要掉換順序呢？例如把 P1 改成疊在中間的位置？這時候我們可以稍微修改一下三張圖片的 z-index 屬性值，把 P1 的 z-index 設為 1，P2 的 z-index 設為 0，P3 的 z-index 設為 2，就可以輕鬆的設計出我們想要的多張圖片重疊的效果與圖片重疊的順序，看起來就像下面這樣。
CSS z-index 用來設計網頁的圖片重疊效果非常好用，善用這種特性，可以設計出蠻有層次感的網頁風格，其實 z-index 不只是可以讓圖片重疊，也可以讓其他的網頁元素如 DIV 區塊重疊，應用範圍相當廣泛

延伸閱讀
© Copyright webtech.tw Since 2010