Me gustaría tener un ícono en el que se pueda hacer clic como parte de una etiqueta flotante de formulario, pero la etiqueta parece estar detrás de la entrada.

Intenté jugar con z-index sin suerte y no estoy seguro de qué más puedo hacer para solucionar el problema. ¿Podría alguien señalarme en la dirección correcta?

https://blazorfiddle.com/s/y4143uso

El botón "Probar" y el icono por sí solos (col#3, col#4) funcionan, pero las dos primeras columnas con ejemplos de formularios flotantes no redirigirán cuando se haga clic en el icono.

 @page "/" @inject NavigationManager NavigationManager <div class="container-fluid"> <div class="row"> <div class="col-1"> <div class="form-floating"> <input type="text" class="form-control" placeholder="bla"> <label>LABEL<i class="fas fa-info-circle ps-1" @onclick="Test"></i></label> </div> </div> <div class="col-1"> <div class="form-floating"> <input type="text" class="form-control" value="blabla"> <label>LABEL<i class="fas fa-info-circle ps-1" @onclick="Test"></i></label> </div> </div> <div class="col-1"> <button type="button" class="btn btn-sm btn-primary" @onclick="Test">Test</button> </div> <div class="col-1"> <i class="fas fa-info-circle ps-1" @onclick="Test"></i> </div> </div> </div> @code { void Test() { NavigationManager.NavigateTo("https://google.com"); } }