CSS实现一个盒子遮盖另一个盒子的效果

需求分析

需要实现如下图所示效果,盒子A被盒子B遮盖一部分的效果。
在这里插入图片描述

需求实现

我们知道,盒子重叠问题可以用“子绝父相”来解决。父盒子设置为相对定位,子盒子设定为绝对定位。
然后我们再设置对应的topbottom达到效果。
于是我们将最外层的大盒子设置为position:relative
里面的两个小盒子都设置为position:absolute,再给需要处理的盒子加上top,表示从包含它的定位元素(也就是父盒子)的顶部边缘往下放置60个像素,就实现了遮盖另一个盒子的效果了。
在这里插入图片描述

现在就实现我们想要的效果了。

参考文档

样例运行


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部