Reproduction URL (Required)

https://github.com/kensodemann/show-floating-labels

What version of daisyUI are you using?

5.0.43

Which browsers are you seeing the problem on?

All browsers

Describe your issue

I have an application that has some forms using floating labels. I also have a drawer menu to the left. On smaller form factors, this drawer is opened via a hamburger menu. If this takes place while there is data in the inputs, and thus the labels are floating, they float above the drawer.

I have reproduced this in a simple app. To replicate, run the (see instructions in README.md file), fill in some of the inputs so at least one of the labels floats, then open the drawer using the hamburger menu. You should see the floating labels float above the menu.

Inputs with the labels floating:

Labels floating over the drawer:

I noticed the floating labels use a z-index of 2, and removing that solves this issue, but I have no idea if it causes other issues.

.floating-label {
    &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) {
        > span {
            opacity: 100%;
            top: 0;
            translate: -12.5% calc(-50% - 0.125em);
            scale: 0.75;
            pointer-events: auto;
            z-index: 2;
        }
    }
}