HTML5图片层叠的实现示例


Posted in HTML / CSS onJuly 07, 2020

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

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

HTML5图片层叠的实现示例  

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

HTML5图片层叠的实现示例 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布局

<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图片层叠的实现示例的文章就介绍到这了,更多相关HTML5图片层叠内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
Html5获取用户当前位置的几种方式
Jan 18 HTML / CSS
HTML5 层的叠加的实现
Jul 07 #HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 #HTML / CSS
html5启动原生APP总结
Jul 03 #HTML / CSS
HTML5开发动态音频图的实现
Jul 02 #HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 #HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 #HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 #HTML / CSS
You might like
收集的php编写大型网站问题集
2007/03/06 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
轮播的简单实现方法
2016/07/28 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
协议书怎么写
2014/04/21 职场文书
专题组织生活会方案
2014/06/15 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
音乐会主持人开场白
2015/05/28 职场文书