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 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 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安装攻略:常见问题解答(一)
2006/10/09 PHP
php获取远程文件大小
2015/10/20 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
jQuery实现动态删除LI的方法
2017/05/30 jQuery
基于AngularJS实现表单验证功能
2017/07/28 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
git进行版本控制心得详谈
2017/12/10 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
html5的localstorage详解
2017/05/09 HTML / CSS
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
中层干部岗位职责
2013/12/18 职场文书
大学生入党思想汇报
2014/01/01 职场文书
2015年营业员工作总结
2015/04/23 职场文书
德能勤绩工作总结
2015/08/11 职场文书
2016春节放假通知范文
2015/08/18 职场文书
聘用合同范本
2015/09/21 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis