i have tried a lot of things but I don't know how to do it. I want the drown result stay over the other dropdown but all dropdowns looks like if they are z-index: 9999; I don't know if I am making you understand but here is that pic...

im using Tom Select JS and this is my custom css

$select-ns: 'ts' !default;

.#{$select-ns}-wrapper {
    @apply z-10;
    .#{$select-ns}-control {
        padding-right: 2rem;
        @apply bg-stone-100 px-4 rounded-lg shadow-sm border-2 border-slate-100 focus:border-blue-400 focus:outline-none p-3 font-semibold h-auto #{!important};

        &,
        input {
            transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
            transition-duration: .15s;
            transition-timing-function: cubic-bezier(.4, 0, .2, 1);
            font-size: 15px;
            cursor: pointer;

            &::placeholder {
                @apply text-base-content font-semibold;
            }
        }
    }

    .#{$select-ns}-dropdown {
        font-size: 16px;
        @apply bg-base-200 border-slate-100 #{!important};

        .create:hover,
        .option:hover {
            @apply bg-primary text-white font-bold  #{!important};
        }
    }

}