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

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

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

要想实现上图的图片重叠，只需设置属性元素的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>

整合后的运行效果：

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• css3中border-image语法是什么，有何使用技巧

  css3图片边框之如何使用border-image你知道吗？下文有详细的介绍，小编觉得挺实用的，对大家学习或工作或许有帮助，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

• ajax提交表单含HTML代码导致报错该怎么办

  最近项目中用到富文本编辑器，在进行数据提交时发生错误：一开始是并不清楚是怎么回事，经过以上测试后发现是与提交数据中含HTML代码有关，于是开始寻求解决方案。

• 在CSS中怎么把元素隐藏，方法有什么

  1.opacity:0只是把元素隐藏起来了，但是还是占有布局，所以还是对布局有影响<divclass="div1">snda:opacity:0只是把元素隐藏起来了，但是还是占有布局，所以还是对布局有影响</div><p>ppskdkad</p>.div1{opacity:0;width:200px;height:200px;border:1pxsolidred;}2.visibility:hidden还是只是把元素隐藏了，但是还是占有布 ...

• 在CSS中怎么画一个垂直的椭圆图形

  方法：1、利用width和height属性，将元素设置为高度值大于宽度值的矩形；2、利用“border-radius”属性，将矩形元素设为上下尖角的椭圆，只需要给矩形元素添加“border-radius:100%;”样式即可。

• 在CSS中图片居右对齐的设置方法是什么

  在css中，可以利用“text-align”属性让图片右对齐显示，该属性用于设置元素的水平对齐方式，当属性的值为right时，元素会向右对齐显示，只需要给元素添加“text-align:right;”样式即可。