elementui关于弹出的卡片，模态框Z-index与自己编写的定位层问题

最新推荐文章于 2025-03-26 11:04:59 发布

u011010407

最新推荐文章于 2025-03-26 11:04:59 发布

阅读量8.6k

点赞数

分类专栏： elementUI+vue 文章标签： elementui zIndex

本文链接：https://blog.csdn.net/u011010407/article/details/100140254

版权

elementUI+vue 专栏收录该内容

8 篇文章

订阅专栏

今天在表格上做了一个右键，你可以认为是一个查看详情，然后呢做了一个遮罩层，遮罩层自己没写，使用的是element的v-loading服务

 this.diffModal = this.$loading({
    lock: true, 
    spinner: ' ',
    background: 'rgba(0, 0, 0, 0.1)'
 });

然后查询详情的面板就是用了 position: fixed;

然后问题来了，在详情面板中的popover、el-dropdown看不到了，最后发现是z-index的问题，如何解决呢，其实就是修改详情面板的z-index即可

 
this.$nextTick(() => {
    this.$el.querySelectorAll('.diff-box')[0].style.zIndex = parseInt(zIndex) + 1;
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

u011010407

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）

王二红

03-20

3930

vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在elementui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2elementUIel-dialog修改了body样式不生效问题解决方案，element组件

解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的遮罩层z-index问题

ylnzzl的博客

10-28

5541

解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的遮罩层z-index问题

参与评论您还未登录，请先登录后发表或查看评论

关于element请求的Loading的z-index全局设置

weixin_51008268的博客

08-26

4734

关于element请求的Loading效果,会被其他的drawer或者dialog盖住 element的Loading效果的z-index会自己计算的，但是有时我们项目中会出现loadng不会该剧全局解决方法：通过css是无法修改loading中的style的z-index的效果即使添加!important 可以通过此代码是配置element 的loading function startLoading() { // 如果BOX在此处获取设置style会报错，此时的style为null loadingI

vue+element 使用弹框this.$confirm 区分关闭和取消按钮

xixi_666的专栏

03-26

993

点击按钮，弹出弹窗，要做两个。，要区分开选择和关闭的功能。

快速解决element ui的组件的版本z-index层级问题

weixin_44500448的博客

06-30

1718

怎么快速解决element ui的组件的版本z-index层级问题首先你要清楚，element ui组件(selectdialogz-index的层级从哪里来的。你看源码就会知道，每次都会混入个可以知道，他的层级是从这个Popper这里来的，我们在写组件的时候，只需要获取他的Popper混入方法就行。然后，在通过这个方法的这个方法获取。

【ElementUI】Popup组件z-index层级设定机制与自定义方式

热门推荐

csdn_vplus的博客

09-22

1万+

大家好，我是九幡，今天分享一个关于ElementUI Popup型组件显示层级的问题。目录现象实现方式自定义方式案例现象我们平时在使用ElementUI的时候，也许会发现这样的现象：像选择器的下拉列表、弹框、对话框、弹出框等Popup类型的组件，他们的DOM上，会通过内联样式设定z-index属性：并且在我们每次使这些组件从不显示到显示时，它们的z-index就会累加：并且这个用来做累加的值，是这些组件间共用的：我们知道，z-index属性可以用来控...

element dialog的z-index与element-select组件下拉菜单的z-index同值，导致第一次点击时下拉菜单不可见

NOIFNOIFNOIF的博客

04-14

1832

解决方法：给选择器添加 popper-class 属性往 el-select-dropdown div内自定义class class的z-index设置为 z-index: 9999 !important; 注意：style 标签不可添加 scoped 不然不生效可新写一个style标签来存放该添加的样式如上图 ...

elementUI vue this.$confirm 和el-dialog 弹出框移动示例demo

12-09

调试了好久, 还能凑合用, 请直接看DOME ...link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style media="screen" type="text/css"> #appLoading { width: 100%;

vue+element模态框中新增模态框和删除功能

01-19

实现效果如下结构操作> <template slot-scope=scope> (scope.row.id)>成员 (scope.row.id,>删除 </el-table-col

关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

01-25

1. 调整Z-index：确保Select组件的z-index值高于其他元素，以确保下拉菜单始终在顶部显示。 2. 使用`popper-append-to-body`属性：ElementUI提供了一个名为`popper-append-to-body`的属性，将其设置为`false`可以使...

【已解决】element-ui组件嵌套太多层，导致内部el-input和el-select 等组件无法正常输入解决方案

高电平的博客

04-06

1738

如果 element-ui 组件嵌套太多层，可能会导致内部的 el-input 和 el-select 等组件无法正常输入。出现这种问题通常是由于 z-index 属性设置不正确导致的。解决这个问题的方法是调整组件的 z-index 属性，使其不会被其他组件覆盖。以下是一个解决方法：

element-ui select选择器显示层级z-index的大小

兰颜的博客

08-25

4783

在用vue2写一个添加商品的页面，其中用到了select下拉框和wangeditor编辑器，但是select下拉框被编辑器盖住了经过查看，是因为编辑器的z-index层级太高解决办法是给“el-select”的z-index 层级加高是我用:popper-append-to-body="false"，将下拉框载在到里面的 ...

解决tinymce在ElenentUI中使用z-index层级低，菜单不显示

WEB前端大咖

02-28

1805

解决tinymce在ElenentUI中使用z-index层级低，菜单不显示的问题

列表，更多，显示下拉菜单的使用，z-index

u012148262的博客

02-08

1156

今天想做一个hover显示下拉菜单的功能，发现上面div怎么都覆盖不了下面列表：z-index：当你定义的CSS中有position属性值为absolute、relative或fixed, 用z-index此取值方可生效。...

vue+element实现一个卡片点击增加弹出模态框效果

weixin_44288191的博客

03-19

2534

实现效果点击+弹出模态框 实现过程 <template> <div class="ing-container"> <el-row :gutter="20"> <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6"> <el-card shadow="hover"> <div slot="header">

ElementUI Card组件触发点击事件

qq_45228330的博客

12-20

9618

遇到的问题：在做卡片点击改变样式时发现el-card组件点击方法没有触发到。解决方式： @click = method(x,y)替换成@click.native = method(x,y) 参考链接: https://blog.csdn.net/weixin_43937526/article/details/120410660.

如何使用elementUi中的card卡片以及小数点转换百分比四舍五入

qq_45018844的博客

03-03

2404

项目场景：后端给你的数据中是小数点、数组、对象，如何渲染在页面上。这是效果图，上面是自己用h5渲染的，下面用到element的card 上代码 <template> <div> <el-row :gutter="20" style="margin-left: 10px"> <div style="height: 50px"> <ul class="rightTip"> <li class="leftTip

z-index 无效的解决问题

前端小胡兔的博客

12-24

694

1、父标签 position属性为relative； 2、问题标签无position属性（不包括static）； 3、问题标签含有浮动(float)属性。解决办法有是三个： 1、position:relative改为position:absolute； 2、浮动元素添加position属性（如relative，absolute等）； 3、去除浮动。 ...

解决vue-cli4.5.0与element-ui冲突的方法

qq_36382636的博客

07-30

1802

"export ‘default’ (imported as ‘Vue’) was not found in ‘vue’ 这个错误是在用vue-cli4.5.0脚手架后npm i element-ui出现的问题，这个element-ui这个在官网上main.js的配置对于这个版本的脚手架没用就会报这个错，样式加载不出来，解决方法如下 npm uninstall element-ui npm install element-plus npm install -g @vue/cli import { cr

elementui下拉框弹出层被遮盖

最新发布

04-29

### ElementUI 下拉框弹出层被遮挡的解决方案 #### 1. 修改 `z-index` 层级当 ElementUI 的下拉框弹出层被其他组件（如模态框或覆盖层）遮挡时，可以通过调整其 `z-index` 值来解决问题。具体方法是在全局样式文件中增加如下代码： ```css body > div.el-popper.el-cascader__dropdown { z-index: 9999 !important; } ``` 此代码通过提高 `.el-popper` 和 `.el-cascader__dropdown` 类的选择器优先级以及 `z-index` 数值，确保下拉框始终位于顶层[^1]。对于更通用的情况，也可以直接针对所有的弹出层设置更高的层级： ```css .el-select-dropdown { z-index: 9999 !important; } ``` 这一步适用于大多数场景下的弹出层遮挡问题[^3]。 --- #### 2. 处理父容器的溢出属性如果下拉框所在的父容器设置了 `overflow: hidden;`，可能会导致弹出层无法正常显示。此时需要将父容器的 `overflow` 属性改为 `visible` 或者移除该属性： ```css .parent-container { overflow: visible !important; } ``` 这样可以防止因父容器裁剪而导致的弹出层不可见问题[^3]。 --- #### 3. 将弹出层挂载到 `<body>` 上某些情况下，即使调整了 `z-index`，仍然可能因为 DOM 结构的原因导致弹出层被遮挡。这时可以考虑将弹 out 层挂载到 `<body>` 标签上，而不是默认的父节点位置。ElementUI 提供了一个配置项 `append-to-body` 来实现这一点： ```javascript <el-select v-model="value" append-to-body> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> ``` 通过启用 `append-to-body` 属性，可以让弹出层脱离当前父容器的作用域，从而避免受到父容器样式的干扰[^2]。 --- #### 4. 针对 Popper.js 的进一步优化部分版本可能存在 Popper.js 的兼容性问题，导致弹出层的位置计算错误或者层级异常。可以在项目中引入自定义的 Popper.js 设置，或者参考官方文档中的相关参数进行调试[^4]。例如，在 Vue 组件初始化时手动调用 Popper.js 方法重新计算位置： ```javascript this.$nextTick(() => { this.$refs.select.updatePopper(); }); ``` 这种方法适合处理动态变化引起的定位偏差。 --- #### 总结综合以上几种方式，可以根据实际需求选择合适的解决方案： - 如果问题是简单的层级冲突，则优先调整 `z-index`； - 若涉及父容器的溢出隐藏，则修正父容器的 `overflow` 属性； - 对于复杂嵌套结构，推荐使用 `append-to-body` 参数或将弹出层绑定至 `<body>`； - 如仍有未解决情况，可深入排查 Popper.js 行为并适当干预。 --- ###