- 个人简介: 哈喽！小伙伴们，我是水香木鱼，水瓶座一枚 来自于黑龙江 庆安
- 本站首页: 水香木鱼
- 博客主页: 陈春波 开源博客【纯前端开发-Vue3+TS+Ant Design of Vue】，来 Star⭐Gitee吧 ! 拥有属于我们自己的 Blog。
- 系列专栏：邂逅CSS
- 人生格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
- 小目标: 成为前端布道师
文章内容 1、需求分析每个人都在路上，为自己的生活各自奋斗！再忙也要注意身体健康！—水香木鱼
2、遮挡解决要求在左侧菜单栏【底部】显示 火车的背景图
遮挡问题复现
注意: 我们看上图 中,左侧菜单栏 底部,背景图已经配置好了,但是问题来喽! 就是我去点击菜单栏的时候,尤其是接近背景图的时候,切换菜单 无明显效果。这是为什么呢？
答:这是因为背景图优先显示在上层的原因,是z-index 惹的锅。
解决这一问题,只需要在.bg-lb 内添加pointer-events: none;即可解决!
.bg-lb{
display: block;
z-index: 1100;
pointer-events: none;
position: absolute;
left: -199px;
bottom: 1px;
width: 199px;
height: 210px;
background: url(../assets/lightCode/img/bg_lb.png) -1px -1px no-repeat;
background-size: 166% 102%;
opacity: 0.5;
}
3、演示效果
博主致谢
非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了(前端css解决z-index 上层元素遮挡下层元素的方法)，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
您的支持就是我更新的最大动力。
往期精彩
Visual Studio Code插件-前端工程师开发必备
码云(gitee)配置ssh密钥的步骤？与解决git每次提交用户名的问题
最详细的教程，教你如何彻底关闭Chrome浏览器自动更新
如何使用csdn里的自定义模块管理专栏，看这一篇就够了。
gitee实现个人存放网络资源图片集vue公测版
