前端css解决z-index 上层元素遮挡下层元素的方法
2023-09-27 14:27:10 时间
剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难
🔎 了解博主
- 📢 个人简介: 哈喽!小伙伴们,我是水香木鱼,水瓶座一枚 😜 来自于黑龙江 庆安
- 🏡 本站首页: 水香木鱼
- 🚀 博客主页: 陈春波 👉 开源博客【纯前端开发-
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;/*解决 z-index 上层元素遮挡下层元素点击事件*/
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;
}
博主致谢
非常感谢小伙伴们阅读到结尾,本期的文章就分享到这里,总结了
(前端css解决z-index 上层元素遮挡下层元素的方法)
,希望可以帮到大家,谢谢。
👉 如果你觉得本篇文章有帮助到您,鼓励一下木鱼吧! 点击
【关注+点赞+收藏+评论+转发
】支持一下哟
😛 您的支持就是我更新的最大动力。👇
往期精彩
Visual Studio Code插件-前端工程师开发必备
相关文章
- Linq中的常用方法
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- FTP连接时出现“227 Entering Passive Mode” 的解决方法(附加实际案例)
- Sql Update语句使用表别名的方法(多种方法,经典)
- JQuery 方法回调$callback
- 前端基础 - JavaScript方法覆盖
- 《软件工程方法与实践》—— 第2章 软件过程 2.1 引言
- CSDN日报20170305——《谈谈学习方法》
- Spring源码之容器的功能扩展和refresh方法解析
- EF Core 拓展SqlQuery方法(转载)
- 前端解决跨域问题的常见方法及优缺点对比
- java 数组声明方法
- 运营推广的一些方法
- IE下JS接受ActiveX控件方法
- 常见的交互设计方法
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- 浅析watch使用方法及从内部实现解析watch的工作原理
- JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法
- 数组的拓展方法
- C#标记 [已弃用] 的方法