[Résolu] Suggestion de mots masqués

Bonjour à toutes et à tous et d'avance merci de votre aide.
Dans le site test : http://0coolmsn.free.fr/ ,lorsque l'on clique sur laine et coton ou création les ascenseurs sont au dessus du bandeau Christelle et Laura.
Par contre lorsque que l'on met une lettre dans la barre de recherche seul un ou deux mots apparaissent sur les quatre programmés. Je galère depuis plusieurs heures et jours pour résoudre ce problème. J'ai essayé des <br> pour créer un intervalle, mais non. Merci d'avance.
Modifié par BruChri (18 Oct 2025 - 12:43)

Salut,
tu peux très certainement régler ce problème avec z-index.
Le z-index de ta barre de recherche doit être supérieur à celui du bandeau de Christelle et Laura.
Précision. Le z-index, pas sur le bandeau en lui-même, mais la partie qui se déroule.
Modifié par Bongota (18 Oct 2025 - 14:46)

Bongota a écrit :
Salut,
tu peux très certainement régler ce problème avec z-index.
Le z-index de ta barre de recherche doit être supérieur à celui du bandeau de Christelle et Laura.
Précision. Le z-index, pas sur le bandeau en lui-même, mais la partie qui se déroule.

Bonjour Bongota, le z-index est a 999

#SuggestionMot {
    position: absolute;
    background: white;
    border: 2px solid #ccc;
    list-style: none;
    padding: 5px;
    border-radius: 10px;
    margin: 0;
    width: 90%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
}

Bonjour,
>> J'ai essayé des <br> pour créer un intervalle,
Un <br> c'est pour créer un retour ligne dans une portion de texte, rien d'autre. Et surtout pas pour créer des espacements entre éléments.

Sauf que ce n'est pas sur #SuggestionMot qu'il faut le placer mais sur un parent ou ancêtre vu la structure de la page.
Place le sur le header cela fonctionnera.
Lire Comprendre z-index en CSS

casper2 a écrit :
Sauf que ce n'est pas sur #SuggestionMot qu'il faut le placer mais sur un parent ou ancêtre vu la structure de la page.

Ah, aucune erreur sur "validator" aujourd'hui ? Merci casper2, mais malheureusement je ne comprend pas ce que tu veux que je fasse. Désolé et merci quand même.
J'ai supprimé les <br> , mais ça me descendait quand même un peu.
Modifié par BruChri (18 Oct 2025 - 16:44)

Quelque chose comme :

position: relative;
z-index: 10;

Sur la balise <header> . C'est tout ce bloc qui sera positionner par dessus le reste sur l'axe des z. Cela fera passer la liste qui apparait dans la zone de recherche par dessus le slider.

Merci casper2, c'est bon.