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

最新推荐文章于 2024-12-16 20:38:43 发布

Point酱

最新推荐文章于 2024-12-16 20:38:43 发布

阅读量3.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40571965/article/details/88669120

版权

前端专栏收录该内容

41 篇文章

订阅专栏

博主分享小项目中头像与对话框图片叠加问题的解决办法。通过对父级设置position:relative属性，子级设置position:absolute并结合left、right、top、bottom实现子级在父级内任意定位，避免因浏览器缩放导致图像错位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

.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盒子其越靠前（浮在上面）。

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