需求分析
需要实现如下图所示效果,盒子A被盒子B遮盖一部分的效果。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e872551e83debf7d99b7f9b4ec13057d.png)
需求实现
我们知道,盒子重叠问题可以用“子绝父相”
来解决。父盒子设置为相对定位,子盒子设定为绝对定位。
然后我们再设置对应的top
或 bottom
达到效果。
于是我们将最外层的大盒子设置为position:relative
里面的两个小盒子都设置为position:absolute
,再给需要处理的盒子加上top
,表示从包含它的定位元素(也就是父盒子)的顶部边缘往下放置60个像素
,就实现了遮盖另一个盒子的效果了。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f123fd79a38f476b17ff583478539235.png)
![现在就实现我们想要的效果了。](https://i-blog.csdnimg.cn/blog_migrate/fc58b2b73474fd4a2e8a82a87351f7f2.png)
参考文档
样例运行