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实现背景模糊的三种方式
Mar 09 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
php采集时被封ip的解决方法
2010/08/29 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
Python程序中设置HTTP代理
2016/11/06 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
jupyter 导入csv文件方式
2020/04/21 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
车间班组长岗位职责
2013/11/13 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
颐和园英文导游词
2015/01/30 职场文书
志愿者个人总结
2015/03/03 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python