最近在跟的一個深圳屋祺項目，由於一些內部原因這次我們需要自己寫靜態頁面。兵來將擋水來土掩，既然組織
需要那就做唄。其中有一個頁面佈局如下所示，
紅色方框標註的部分是由三張圖片組合而成，各部分圖片如下：
要想實現上圖的圖片重疊，只需設置屬性元素的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>整合後的運行效果：
這次項目也算是一次前臺積累的機會吧。要想做一個優秀的工程師，必須全面發展，積極響應組織號召，哪裏
需要去哪裏！