如图所示，当给弹窗加上了z-index层级之后，hover按钮时，显示的文字会被弹窗遮挡。

如果直接给tooltip设置层级是无效的：

<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start" style = "z-index: 10000"> 
    <el-button>上左</el-button> 
</el-tooltip>

这是因为，在Element UI中，Tooltip组件的内容是通过popper.js动态插入到body元素下的，所以直接在Tooltip组件上设置z-index是无效的。

需要通过全局样式来设置Tooltip内容的z-index。（因为先解析VUE文件，scoped的话会添加一个独特的属性，再动态渲染组件库的内容）Tooltip内容的class通常是.el-tooltip__popper，所以可以这样设置：

<style lang="less">
.el-tooltip__popper{
    z-index: 10000 !important;
}
</style>

如果不想影响全局其他的样式，ElementUI的tooltip还提供添加类名的属性：

popper-class | 为 Tooltip 的 popper 添加类名 |

因此更改后如下：

<el-tooltip popper-class="my-tooltip-popper" class="item" effect="dark" content="回滚" placement="bottom">
    <i class="el-icon-refresh-right" @click="backMap()"> </i>
</el-tooltip>

<style lang="less">
.my-tooltip-popper{
    z-index: 10000 !important;
}
</style>

对于下拉菜单而言，想要把menu在前面展示，要更容易一些：

<el-dropdown> 
    <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> 
    </span> 
    <el-dropdown-menu slot="dropdown" style="z-index: 10000 !important;"> 
        <el-dropdown-item>黄金糕</el-dropdown-item> 
        <el-dropdown-item>狮子头</el-dropdown-item> 
        <el-dropdown-item>螺蛳粉</el-dropdown-item> 
        <el-dropdown-item disabled>双皮奶</el-dropdown-item> 
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item> 
    </el-dropdown-menu> 
</el-dropdown>

深度选择器

利用深度选择器，可以穿透作用域。即使这些类名不显式写在vue模板中，而是由类似tDesign动态生成的子属性。 例如，如果想让textArea宽度为320px，这样：

<t-textarea style="width: 500px;"></t-textarea>

是无法生效的。因为组件内部样式的优先级高于你设置的内联样式，或者组件内部使用了特定的 CSS 类来控制宽度，这些类的样式可能覆盖了你的内联样式。那么可以使用深度选择器即可：

<style scoped>
:deep(.t-textarea__inner) {
  width: 320px !important;
}
</style>