全国服务热线:4008-888-888

技术知识

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照片堆叠的完成实例的文章内容就详细介绍到这了,大量有关HTML5照片堆叠內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服