【WEB】解决两个图像重叠的问题

这两天做小项目的时候遇见了这个问题，分享给跟我有同样问题的同学
如图所示
头像与对话框需要两个图片叠加才可以解决。

.right-relative{position:relative; color:#000; width:500px; height:400px;margin: 0 auto;
}
.right-a{ position:absolute; left:800px; top:30px; width:200px; height:100px}
.right-b{ position:absolute; left:899px; top:10px;  width:400px; height:200px}
.right_name{position: absolute;padding: 0px 4px 15px 40px;color: blue;font-family:verdana;font-size: 20px;}
.right_to{color: #666;font-family:verdana;position: absolute;padding: 2px 10px 2px 9px;
}

 <div class="right_elative"><div class="right-a"><img width="150" height="150" src="右.jpg"/>  <br><span class="right_name">SUE</span><br><span class="right_to">local experts</span></div><div class="right-b"><img width="90" height="90" src="聊天信息.png" /></div>   </div>

代码解释
使用position实现绝对定位.
对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。
在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前（浮在上面）。

这样处理，两个图像就不会因为浏览器缩放问题而错位啦~

【WEB】解决两个图像重叠的问题相关推荐

Cesium 解决两个billboard重叠问题
有时我们会在同一个坐标点叠加两个图片,但是Cesium中没有z-index的概念,因为cesium中是利用深度来区分先后的,所以这两个图片的层级关系我们控制不了,会出现一个图片被另一个遮挡的情况. 针 ...
【Visio2003两根线重叠凸起如何让解决】
Visio2003两根线重叠凸起如何让解决选中右击→格式→行为选择跨线→从不
opencv两个图像相互融合/重叠/拼接
学习图像的几种算术运算,例如加法,减法,按位运算等. 您将学习以下功能:cv.add,cv.addWeighted等. 图像加法您可以通过OpenCV函数cv.add()或仅通过numpy操作res ...
【实战】物联网安防监控项目【5】———把模拟数据传输到web网页、web显示mjpeg-streamer视频图像
1.模拟数据传输到web 为了把硬件传感器上的数据上传到web网页,我们需要在跑linux服务器的开发板上写一个应用程序,并创建出几个线程来收集传感器检测到的数据,通过进程/线程间通信.boa与cgi ...
[Swift]LeetCode835. 图像重叠 | Image Overlap
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
OpenCV之core 模块. 核心功能（1）Mat - 基本图像容器 OpenCV如何扫描图像、利用查找表和计时矩阵的掩码操作使用OpenCV对两幅图像求和（求混合(blending)）
Mat - 基本图像容器目的从真实世界中获取数字图像有很多方法,比如数码相机.扫描仪.CT或者磁共振成像.无论哪种方法,我们(人类)看到的是图像,而让数字设备来"看"的时候,则 ...
LeetCode 835. 图像重叠
1. 题目给出两个图像 A 和 B ,A 和 B 为大小相同的二维正方形矩阵.(并且为二进制矩阵,只包含0和1). 我们转换其中一个图像,向左,右,上,或下滑动任何数量的单位,并把它放在另一个图像的 ...
相机计算坐标公式_相机位姿估计3：根据两幅图像的位姿估计结果求某点的世界坐标...
关键词:相机位姿估计,单目尺寸测量,环境探知用途:基于相机的环境测量,SLAM,单目尺寸测量文章类型:原理说明.Demo展示 @Author:VShawn @Date:2016-11-28 @La ...
两张人脸图像比对ocr技术
两张人脸图像进行对比的技术,活体检测技术产品简介两张人脸图像进行对比的技术技术主要分为两部分: 第一部为前端人脸活体检测技术,主要支持android.ios平台,在前端通过眨眼.张嘴.摇头.点头等组 ...

【WEB】解决两个图像重叠的问题

【WEB】解决两个图像重叠的问题相关推荐

最新文章

热门文章