uni-app z-index无效的解决办法(遮罩层)

在前端开发中,遇到一个需求是创建遮罩层并确保某些组件位于其上方。尝试通过调整z-index来实现,但效果不理想。查阅资料后发现,z-index生效需要满足特定条件:父元素position非static,问题元素需有position属性且非static,并清除浮动。经过检查和尝试,将问题组件设置为position:relative和z-index:99,最终解决了遮罩层层级问题。
摘要由CSDN通过智能技术生成

前言:

现在是做一个遮罩层效果,需要部分组件要在遮罩层上面,其他比遮罩层低。效果如图:
在这里插入图片描述

问题:

于是想到在需要在遮罩层以上的那个组件的z-index使层级拉高
在这里插入图片描述
但是效果却不如我们想的那样
在这里插入图片描述

查询资料:

看了别人的文章说这种情况有两种原因
第一种又有三小点:
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。
解决办法为:
1、position:relative改为position:absolute;
2、浮动元素添加position属性(如relative,absolute等);
3、去除浮动。

但是我看了看我的代码,发现一种情况也不符合,于是我继续看第二种原因,但是我看得不太明白,就直接用它的解决办法:
简而言之就是问题标签直接
position: relative; z-index: 99;二连
在这里插入图片描述

后面成功浮现在遮罩层上

参考文章传送门:

div层调整z-index属性无效原因分析及解决方法

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值