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 07 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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/06/14 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
python复制文件到指定目录的实例
2018/04/27 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
园林施工员岗位职责
2013/12/11 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2014年班务工作总结
2014/12/02 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
学生通报表扬范文
2015/05/04 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
mysql部分操作
2021/04/05 MySQL
Redis中一个String类型引发的惨案
2021/07/25 Redis