（本文来源：nzw6.com）
ElementUI 被挡住-elementui bug
在使用ElementUI的过程中，如果遇到组件被挡住的问题，一个通用的解决方案是调整z-index层级关系。确保需要显示在最上层的元素拥有足够高的z-index值，同时检查是否有其他元素设置了position: fixed或absolute等定位方式影响了正常的渲染层级。
一、检查父级元素样式
有时候可能是父级元素的样式限制了子元素的层级显示。比如父级元素设置了overflow:hidden，这可能会导致超出父级范围的内容被裁剪掉，看起来就像是被挡住了。解决方法是在父级元素中添加overflow: visible;。
css
.parent {
overflow: visible;
}
二、调整z - index属性
这是最直接的办法。以弹出框为例，如果发现弹出框内容被页面其他部分遮挡，可以为弹出框设置一个较高的z-index值。
html
<template>
<el-dialog :visible.sync="dialogVisible" style="z-index: 3000;">
<!-- 弹出框内容 -->
</el-dialog>
</template>
我们也可以通过全局配置的方式来设置ElementUI组件的默认z-index值。例如，在项目的入口文件main.js中：
javascript
import Vue from 'vue'
import ElementUI from 'element - ui'</p>
<p>Vue.use(ElementUI, {
zIndex: 3000 // 设置所有ElementUI组件的默认z - index值
})
三、排查其他插件或样式库冲突
如果项目中引入了多个样式库或者插件，可能存在样式冲突的情况。此时可以通过浏览器开发者工具查看具体的样式覆盖情况，找到冲突的地方并进行修改。例如，如果发现某个第三方样式库中的样式影响到了ElementUI组件的正常显示，就可以针对性地在自己的样式文件中添加更具体的选择器来覆盖它，像这样：
css
/* 假设是解决按钮样式被挡住的问题 */
body .your - third - party - class .el - button {
/* 添加你想要的样式属性 */
z - index: 1000 !important;
}
还可以尝试将ElementUI的样式加载顺序调整到其他样式库之后，这样可以保证ElementUI的样式优先级更高，减少被覆盖的可能性。
