HTML5圖片層疊怎么實現

這篇文章將為大家詳細講解有關HTML5圖片層疊怎么實現，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

需要那就做唄。其中有一個頁面布局如下所示，

紅色方框標注的部分是由三張圖片組合而成，各部分圖片如下：

要想實現上圖的圖片重疊，只需設置屬性元素的position和z-index屬性。

• z-index：設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。即z-index的值越大顯示越靠上。

• position:有以下幾個值：static，relative，absolute，fixed。

• Static:靜態定位。如果沒有設置position屬性，那么缺省就是static。top，left，bottom，right等屬性，在 static情況下是無效的，要使用這些屬性，必須把position設置為其他三個值之一。
   

• Relative:相對定位。元素將按照靜態定位時的位置進行調整，在靜態定位中分配給元素的空間仍然會分配給它，它兩邊的元素不會向它靠近來填充那個空間，但它們也不會從元素的新位置被擠走。
   

• Absolute:絕對定位。元素將按照包含它的元素的位置進行調整，比如它嵌套在另一個絕對定位的元素中，那么就相對于那個元素定位。
   

• Fixed:固定定位。元素將被設置在瀏覽器上一個固定位置上，不會隨其他元素滾動。形象點說，上下拉動滾動條的時候，fixed的元素在屏幕上的位置不變。需要注意的是IE6并不支持此屬性。

具體實現如下，div布局

<div class="container3-1" style="float:left;">	
	<div>
		<img class="img1"  style="position:absolute;z-index:1;float:left" src="img/4-1.png">
		<img  class="img2"  style="position:absolute;z-index:2;float:left" src="img/4-2.png">
		<img class="img3"  style="position:absolute;z-index:3;float:left" src="img/4-3.png">
	</div>
	<div class="container3-1-1" class="font24" style="text-align:center;color:#FFFFFF;
                background-color:#aaa050;">需保養
	</div>
</div>

整合后的運行效果：

關于“HTML5圖片層疊怎么實現”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。