uni-app z-index无效的解决办法（遮罩层）

前言：

现在是做一个遮罩层效果，需要部分组件要在遮罩层上面，其他比遮罩层低。效果如图：

问题：

于是想到在需要在遮罩层以上的那个组件的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属性无效原因分析及解决方法

uni-app z-index无效的解决办法（遮罩层）相关推荐

记录webView接入h5界面时，调起相册、文件、相机无效的解决办法
记录webView接入h5界面时,调起相册.文件.相机无效的解决办法. 在开发项目时,接入一个h5界面.使用webview时,发现界面显示正常,但是按钮不论怎么点都无效,但是m站和ios都正常.后来上 ...
SqlServer2005/2008下sysproperties无效的解决办法
SqlServer2005/2008下sysproperties无效的解决办法 if exists (select 1 from sysobjects where name = 'syspropert ...
Android studio 实验过程中遇到的问题之android.support.v7.app.AppCompatActivity不能使用的解决办法
android.support.v7.app.AppCompatActivity不能使用的解决办法在构建项目时使用 android.support.v7.XX android.support.v4. ...
解决IE8下body{ overflow:hidden;}无效的解决办法
css中IE8 body{ overflow:hidden;}无效的解决办法: 在页面html中使用: body{ overflow:hidden; } 在ie8下无效 ,仍然有滚动条. 解决的办法如 ...
vscode自动加前缀_详解VScode自动补全CSS3前缀插件以及配置无效的解决办法
1.在vscode中搜索Autoprofixer 2.在安装完成之后要配置在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦 ps: 如果想要兼容性最好的话, ...
C# dgv自动排序后，各种样式设定无效的解决办法
C# dgv自动排序后,各种样式设定无效的解决办法在网上搜索一些资料还是解决不了,所以自己写了记录一下: 给dgv添加一个sorted事件,每次点击小三角排序时就会调用这个方法,在这里将样式重新设定 ...
VirtualBox桥接网络设置无效的解决办法
VirtualBox桥接网络设置无效的解决办法前提:如果本机Windows系统和VirtualBox虚拟机没在一个网段,虚拟机网络设置桥接 1.更改网络适配器–以太网(属性),右键属性 2.安装–选 ...
foxmai过滤器无效的解决办法
foxmai过滤器无效的解决办法一.常规操作第一步:进入foxmail界面,点击右上角红色框部分第二步:右键收件箱->新建文件夹->输入文件夹名这样就建立了一个新的收件箱用来分类收 ...
android设置返回按钮无效,Android onKeyDown监听返回键无效的解决办法
Android onKeyDown监听返回键无效的解决办法当我们的Activity继承了TabActivity,在该类中重写onKeyDown是监听不到返回键的, 具体解决方法如下: 重写dispa ...
Vue下 touchstart touchend 事件无效失效解决办法
Vue下 touchstart touchend 事件无效失效解决办法 <van-button:disabled="isLoading"plaintype="inf ...

uni-app z-index无效的解决办法（遮罩层）

前言：

问题：

查询资料：

参考文章传送门：

uni-app z-index无效的解决办法（遮罩层）相关推荐

最新文章

热门文章