如何设置Vuetify下拉菜单最高z-index以覆盖ApexCharts工具栏图标

可通过以下几种方法调整层级，实现下拉列表显示在图标上方：

• 方案1：通过v-combobox内置属性直接调整下拉菜单层级
  v-combobox继承了v-select的menu-props属性，可直接配置下拉菜单的z-index，优先级最高，无需修改全局样式：

<v-combobox
  // 你的其他原有属性
  :menu-props="{ zIndex: 15 }"
/>

ApexCharts工具栏默认z-index为11，只要设置数值大于11即可生效。

• 方案2：通过CSS调整下拉菜单层级
  如果方案1不生效（比如菜单被挂载到根节点导致属性不生效），可给组件加自定义类名后通过样式调整，注意scoped样式下需要使用深度选择器：

<template>
  <v-combobox
    class="top-combobox"
    // 其他原有属性
  />
</template>

<style scoped>
/* Vue3 写法 */
:deep(.top-combobox .v-menu__content) {
  z-index: 9999 !important;
}

/* Vue2 写法 */
/* /deep/.top-combobox .v-menu__content {
  z-index: 9999 !important;
} */
</style>

• 方案3：调低ApexCharts工具栏的层级
  不想修改下拉菜单样式的话，也可以直接降低ApexCharts工具栏的全局层级：

.apexcharts-toolbar {
  z-index: 10 !important;
}

这个方法修改范围小，不会影响其他下拉组件的层级表现。

内容的提问来源于stack exchange，提问作者AbreQueVoy