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教程(6):创建网站多列
Apr 02 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
一款简洁的纯css3代码实现的动画导航
Oct 31 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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易混淆知识整理笔记
2015/09/24 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
php车辆违章查询数据示例
2016/10/14 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
WebPack基础知识详解
2017/01/16 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python基于socket函数实现端口扫描
2020/05/28 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
初中语文教学反思
2014/02/02 职场文书
承诺书格式范文
2014/06/03 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
驳回起诉裁定书
2015/05/19 职场文书
Python基础详解之描述符
2021/04/28 Python
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
Python pyecharts绘制条形图详解
2022/04/02 Python
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技