如何用TailwindCSS让v-text-field层级低于Vuetify菜单选项？

我在使用TailwindCSS和Vuetify开发项目时，已将菜单选项设置为绝对定位且z-index为50，确保其处于布局顶层，但v-text-field元素始终覆盖菜单选项。

相关代码 #

菜单组件代码 #

<template>
  <div
    v-if="$vuetify.breakpoint.mobile ? false : true"
    @mouseover="opciones = true"
    @mouseleave="opciones = false"
    class="text-gray-500 cursor-pointer"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="icon icon-tabler icon-tabler-report-money"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="#000000"
      fill="none"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <path
        d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
      />
      <rect x="9" y="3" width="6" height="4" rx="2" />
      <path d="M14 11h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5" />
      <path d="M12 17v1m0 -8v1" />
    </svg>

    <div
      @mouseleave="opciones = false"
      @mouseover="opciones = true"
      class="absolute z-50 left-10 top-8 transition ease-in-out px-2"
      v-bind:class="{ hidden: !opciones, flex: opciones }"
    >
      <div class="bg-yellow-300 rounded-lg mt-4 shadow-lg">
        <span
          class="block font-bold text-xl px-6 text-neutral-900 py-2 bg-yellow-400"
          >Ventas</span
        >
        <v-list-item-title
          v-for="pagina in paginas"
          :key="pagina.id"
          class="my-0"
          ><nuxt-link
            class="text-decoration-none"
            :to="{ name: `${pagina.route_name}` }"
            ><p
              class="text-neutral-900 px-6 py-2 my-0 hover:bg-neutral-800 hover:text-white"
            >
              {{ pagina.label }}
            </p></nuxt-link
          ></v-list-item-title
        >
      </div>
    </div>
  </div>
</template>

v-text-field代码 #

<div class="z-10">
   <v-text-field
      class="w-[440px] mt-6"
      v-model="buscador"
      placeholder="Buscar producto por nombre, código o descripción"
      append-icon="mdi-magnify"
      solo
      flat
      clearable
   ></v-text-field>
</div>

问题原因与解决方法 #

原因 #

Vuetify的v-text-field（尤其是solo/flat样式）内部会通过组件预设样式设置较高的z-index，即使给父元素添加了z-10，组件内部的DOM元素仍可能拥有更高层级，导致覆盖菜单。另外，菜单的父容器未设置定位属性，可能导致堆叠上下文计算异常。

解决方法 #

1. 强制提升菜单层级：直接将菜单的z-50替换为更高的Tailwind z-index类，比如z-[100]或z-60，确保层级超过v-text-field的内部层级：

   <div
     @mouseleave="opciones = false"
     @mouseover="opciones = true"
     class="absolute z-[100] left-10 top-8 transition ease-in-out px-2"
     v-bind:class="{ hidden: !opciones, flex: opciones }"
   >
   

2. 修改Vuetify全局样式变量：通过自定义SASS变量覆盖v-text-field的默认z-index，在项目的全局样式文件中添加：

   // 调整文本输入框的z-index
   $text-field-solo-z-index: 10;
   // 引入Vuetify样式（确保此变量在引入前定义）
   @import 'vuetify/styles';
   

3. 修正菜单的堆叠上下文：给菜单的父容器（绑定了@mouseover的div）添加relative类，确保菜单的绝对定位和z-index在正确的堆叠上下文中计算：

   <div
     v-if="$vuetify.breakpoint.mobile ? false : true"
     @mouseover="opciones = true"
     @mouseleave="opciones = false"
     class="text-gray-500 cursor-pointer relative"
   >
   

4. 检查溢出设置：确保菜单的所有父元素未设置overflow: hidden，避免菜单被裁剪而看起来被覆盖。

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