HTML5图片层叠的实现示例

最近在跟的一个深圳屋祺项目，由于一些内部 原因 这次我们需要自己写静态页面。兵来将挡水来土掩，既然组织

需要那就做呗。其中有一个页面布局如下所示，

&nbs p;  

红色 方框标注的部分是由三张图片组合而成，各部分图片如下：

 

要想实现上图的图片重叠，只需设置属性元素的pos IT ion和z -i ndex属性。

z-index：设置元素的 堆叠顺序 。拥有更高 堆叠 顺序的元素总是会处于堆叠顺序较低的元素的前面。即z-index的值越大显示越靠上。 position:有以下几个值： stat ic，relative，absolute，fixed。 Static:静态定位。如果没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在 static情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
  Relative:相对定位。元素将按照静态定位时的位置进行 调整 ，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
  Absolute:绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
  Fixed:固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

具体实现如下，div布局

<div class="cont ai ner3-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>

整合后的运行效果：

  

到此这篇关于HT ML 5图片层叠的实现示例的 文章 就介绍到这了,更多相关HTML5图片层叠内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 HTML5图片层叠的实现示例 全部内容，希望文章能够帮你解决 HTML5图片层叠的实现示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于HTML5图片层叠的实现示例的详细内容...