我如何将v-text-field元素的z索引放在菜单选项的后面？

Question

我目前正在做一个带有尾风和vuetify的项目，并且在z索引为50的绝对位置上定义了菜单选项，以确保选项位于布局的最顶层。

<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字段占据了布局的首位，克服了菜单选项。

<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>

有什么办法可以改变这种行为吗？

这是一个示例

Answer 1

欢迎!div的默认position是static，那么z-index对它没有影响。因此，您应该用position将div的默认z-10更改为其他东西，可能需要relative。