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 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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 cron中的批处理
2008/09/16 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
Python实现八大排序算法
2016/08/13 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
百度JavaScript笔试题
2015/01/15 面试题
行政助理工作职责范本
2014/03/04 职场文书
进口业务员岗位职责
2014/04/06 职场文书
车间质检员岗位职责
2015/04/08 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis