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布局

需保养

整合后的运行效果：

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

html5如何让多张图片重叠,HTML5图片层叠的实现示例相关推荐

html5如何让多张图片重叠,HTML5图片层叠
最近在跟的一个深圳屋祺项目,由于一些内部原因这次我们需要自己写静态页面.兵来将挡水来土掩,既然组织需要那就做呗.其中有一个页面布局如下所示, 红色方框标注的部分是由三张图片组合而成,各部分图片如下: ...
html5如何让多张图片重叠,css怎么让两张图片重叠？
css怎么让两张图片重叠?下面本篇文章给大家介绍一下使用CSS让两张图片重叠的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让两张图片重叠? 想要使用css把两个图 ...
php html5手机端多张图片上传,php+html5兼容手机端的图片选取裁剪上传实例
网上大多图片上传插件都不带裁剪功能,这个是php+html5实现的兼容手机端的图片选取裁剪上传实例,分享出来希望能帮到大家. 首先放置一个上传按钮及相关预览信息等注意:上传前,先截图文件大小类型 ...
HTML5实践 -- 使用css装饰你的图片画廊 - part2
转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html 在上一讲中,我们的解决方案使用到了jquery去创 ...
HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
HTML5/CSS3系列教程：使用SVG图片
为什么80%的码农都做不了架构师?>>> 日期:2013-3-25 来源:GBin1.com 在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG. ...
html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能（图文详解上篇）...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下因为最近一段时间,一直在弄微信项目,其中涉及到 ...
web网页设计实例作业 HTML5+CSS大作业——简单的个人图片网站(6页)
HTML5+CSS大作业--简单的个人图片网站(6页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
HTML5新特性结合PHP实现多图片格式转换功能欢迎讨论
开博第一篇以前有朋友问如何进行图片的批量格式转换,我一直想通过PHP去实现这个功能,但是以前仅仅只是会html4,并了解到多文件上传超麻烦.最近一直在看关于HTML5的书籍,了解到H ...

html5如何让多张图片重叠,HTML5图片层叠的实现示例

html5如何让多张图片重叠,HTML5图片层叠的实现示例相关推荐

最新文章

热门文章