- A+
所属分类：Web前端
CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡
一、未实现重叠效果
<body> <img src="https://cdn.uviewui.com/uview/swiper/swiper2.png" alt="CSS 实现重叠效果时，div 背景被 img 图片遮挡" style="width: 375px;" alt="" srcset="" /> <div style="width: 375px;height: 80px;background: green;"> <p style="text-align: center;color: #fff;"> CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡 </p> </div> </body> 效果：
二、实现重叠效果，但 div 背景被遮挡
通过将 div margin-top 设为负值实现 div 部分重叠在 img 图片上。
<body> <img src="https://cdn.uviewui.com/uview/swiper/swiper2.png" alt="CSS 实现重叠效果时，div 背景被 img 图片遮挡" style="width: 375px;" alt="" srcset="" /> <div style="width: 375px;height: 80px;background: green; margin-top: -50px;"> <p style="text-align: center;color: #fff;"> CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡 </p> </div> </body> 效果：
由效果图可知，存在 div 的绿色背景被遮挡问题。
三、解决实现重叠效果时 div 背景被遮挡问题
方法一、div 设置 position: relative;
通过将 div 设置为 position: relative; 解决实现重叠效果时 div 背景被遮挡问题。
<body> <img src="https://cdn.uviewui.com/uview/swiper/swiper2.png" alt="CSS 实现重叠效果时，div 背景被 img 图片遮挡" style="width: 375px;" alt="" srcset="" /> <div style="width: 375px; height: 80px; background: green; margin-top: -50px; position: relative;" > <p style="text-align: center;color: #fff;"> CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡 </p> </div> </body> 效果：
方法二、div 设置 display: inline-block;，并设置父容器宽度
<body style="width: 375px;"> <img src="https://cdn.uviewui.com/uview/swiper/swiper2.png" alt="CSS 实现重叠效果时，div 背景被 img 图片遮挡" style="width: 375px;" alt="" srcset="" /> <div style="width: 375px;height: 80px;background: green; margin-top: -50px; display: inline-block;" > <p style="text-align: center;color: #fff;"> CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡 </p> </div> </body> 上述代码中，同时设置了父容器 body 的宽度和 div 的 display: inline-block;。
效果：
