Bonjour,

Mon problème est qu'une liste déroulante instancier dans le header passe derrière mon content alors que je voudrait quel soit devant.

Après quelque recherche sur internet, j'ai compris que le problème venait de l'ordre d'empilement effectuer par mes z-index cependant même si je sait où est le problème je n'arrive pas à le résoudre avec mes contraintes.

Un exemple vaut mieux que moultes explications c'est pourquoi je vous met le lien vers un fiddle qui simule exactement mon problème:

http://jsfiddle.net/XvXyy/163/

Et au cas où ça passe pas le code html:

<div id='test1'>
  <span id='test2'></span>
</div>

<div id='test3'>
</div>

et CSS3 :

div{
  position:relative;
  width:200px;
  height:50px;
  z-index:1;
}

#test1{
  background-color:red;
}
#test2{
  background-color:blue;
  position:absolute;
  width:50px;
  height:50px;
  z-index:2;
  top:30px;
  right:100px;
}
#test3{
  background-color:green;
}

Ce que je veut faire c'est faire passer mon <span> #test2 devant mon <div> #test3 sans changer le z-index de mes div.

Je ne sait pas si j'ai était très claire, en attendant merci d'avance pour votre aide.

Bonjour,

#test3{
  background-color:green;
  position:relative;
  z-index:0;
}

Bonjour,

ça marche cependant je ne peut pas modifier le z-index des divs, c'est là qu'est tout le problème

SI ton #test2 restait derrière, c'était parce que #test3 n'était pas positionné.

Par défaut, elle est au niveau 0 ; lui appliquer le code suggéré ne change alors rien sur le reste, cela permet seulement à #test2 de passer devant.

Si ces div ont des z-index différents de 0 que tu dois conserver, il faut que tu saches la valeur de celui de #test3 et lui en mettre une supérieure.

Il faudrait que tu donnes plus d'infos sur le contexte...

#test3 est déjà positionner par la règle css sur les div:

div{
  position:relative;
  width:200px;
  height:50px;
  z-index:1;
}

De plus c'est l'inverse, ce sont les blocs non positionnés qui passe derrière les blocs positionnés dans l'ordre d'empilement.

Mettre un z-index supérieur à #test3 ne marche pas, de part le fonctionnement du z-index. Si deux blocs frère ont un z-index égale l'ordre d'apparition dans le html va déterminé leur ordre d'empilement. Ici #test1 et #test2 sont deux div positionner en absolute avec un z-index de 1, de ce fait #test2 apparaissant en dernier dans le html est au-dessus de #test1.

Le bloc span #test3 a pour parent le bloc #test1 ainsi même avec un z-index supérieur à #test2 il passe quand même derrière ce dernier car son parents est sous #test2 dans l'ordre d'empilement.

Pour le contexte le div#test1 est le header d'un site tandis que le div#test2 est le content. Le span#test3 symbolise un champ de recherche qui ouvre une ListBox, cette ListBox n'entre pas entièrement dans le header et passe sous le content.

-
Edité par MartinLévêque 11 juin 2018 à 17:19:15

Ah oui, désolé, j'avais zappé les 1ères lignes de ton CSS.

Là, tout de suite, je ne vois pas ; si qq'un est plus inspiré?

PS: Je ne verrais guère qu'une solution: enlever tes z-index sur toutes les div ; à quoi servent-ils?
Reviens au positionnement naturel pour les éléments de base et réserve les z-index pour l'exception: #test2

-
Edité par philiga 11 juin 2018 à 18:16:22

C'est le site web développer par l'entreprise où je travaille, je sait absolument pas à quoi il serve et je pense que personne ne le sait ça fait partie des murs du sites fait y a plus de 15 ans personnes de l'époque n'est encore là xD

Je pourrais effectivement les dégagé, mais ça peut casser des parties du sites (ça ce trouve ça servait y a 10ans mais maintenant ça a plus d'impacte). Je préférais être sûre qu'aucune solution n'existait avant de le dégagé temps qu'a faire