vue样式叠层z-index不起作用的解决方案
更新时间：2022年04月29日 11:12:14 作者：小于林等于二
这篇文章主要介绍了vue样式叠层z-index不起作用的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue element 弹框样式叠层问题
z-index不起作用
问题：当点击出现element弹框时，与当前的页面出现叠层问题（使用样式z-index无果），导致弹框页面无法输入。
问题效果图如下：
这里的两个下拉框和echarts图表与弹框修改密码出现叠层问题。
解决思路：
本人一开始在层级上寻在了半天，未能解决问题（采用样式z-index无果），后来发现是上个开发兄弟在两个下拉框和echarts图表均使用到了样式
position: absolute;
导致无法实现。
实现方法：删除到有关样式，用新的方法对组件进行布局。
最后完成的效果图如下：
在这里只提供思路，代码太繁琐就不粘出来，希望能帮到大家噢！！！
z-index失效的原因
1、一般z-index的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方出现。
2、z-index值越大就越是在上层。z-index：9999；z-index元素的position属性要是relative，absolute或是fixed。
3、z-index在一定的情况下会失效。
①、父元素position为relative时，子元素的z-index失效。
- 解决：父元素position改为absolute或static
②、该元素没有设置position属性为非static属性。
- 解决：设置该元素的position属性为relative，absolute或是fixed中的一种。
③、该标签在设置z-index的同时还设置了float浮动
- 解决：float去除，改为display：inline-block；
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue 提供了createElement 来创建虚拟dom，方便我们来函数化的方式来定义复杂的组件结构，这篇文章主要介绍了Vue 中 createElement 使用详解,需要的朋友可以参考下2022-10-10
最近火爆全网的羊了个羊小程序，背景是根据官方介绍，“羊了个羊”是一款闯关消除小游戏，通关率不到0.1%。主要玩法为重叠的各类方块，需要在下方7个栏内完成消除，其特点就是“极难”，也因此成为热门挑战，对vue3版本网页小游戏设计思路感兴趣的朋友跟随小编一起看看吧2022-12-12
这篇文章主要介绍了vue computed的缓存实现原理，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-04-04
今天小编就为大家分享一篇vue单页应用在页面刷新时保留状态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在项目开发的时候很多人都会用到图片上传,本文主要介绍了element-ui中up-load组件实现图片上传回显,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
本文主要介绍了Vite中自制mock服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
下面小编就为大家带来一篇vueJS简单的点击显示与隐藏的效果【实现代码】。小编觉得挺不错的，现在分享给大家，一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了vue项目如何引入公共头部底部问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家介绍了VUE开发分布式医疗挂号系统的医院设置页面步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
二维码是一种广泛应用于各种场合的编码方式，它可以将信息编码成一张二维图案，方便快捷地传递信息，在Vue.js中，我们可以使用一些库和组件来实现二维码的生成和扫描，本文将介绍如何在Vue中实现二维码的生成和扫描的方法2023-06-06
最新评论