[Résolu] Imbrication div, Absolute et Z-index

Bonjour ,

Je sais le sujet est redondant j'ai en partie trouvé l'explication à mon problème, mais en fait j'aimerais bien le résoudre.

Le sujet qui me correspond mais sans solutions : Sujet

J'ai un soucis quand j'imbrique des divs en absolute, la div enfant même si elle est indéxée supérieure (ici 40) passe en dessous de celle à 30 car elle ne sont pas sur le même niveau. (C'est ce que je déduis d'un autre poste).

Je vous fournis le code de mon exemple :

<div style="width:400px;height:400px;background-color:ffaacc;">
  1. Div normale dans le flux
    <div style="width:200px;height:200px;background-color:#aaccff;position:absolute;z-index:20;">2. Div en absolute z-index 20
      <div style="width:100px;height:100px;background-color:aaffcc;position:absolute;z-index:40;">3. Div en absolute z-index 40</div>
    </div>
  </div>
  
  <div style="width:200px;height:200px;background-color:#ccffaa;position:absolute;top:100px;left:40px;z-index:30;">4. Div en absolute z-index 30</div>

et je vous mets un lien vers l'exemple : Exemple

Mon soucis est que je ne peux guère changer cet ordre :

Les trois premières divs servant à la construction du header, de la navigation, et enfin de l'apparition d'un menu en Jquery.

Et la div a part la 4eme, sert de "calque de sortie", je la mets à la racine du body je l'étends sur tout l'écran et je m'en sers quand l'utilisateur passe dessus.

Concrètement j'ai besoin que les menus de navigation soit au dessus du "calque de sortie" mais pas le reste du site.

Merci .
Modifié par Shinji (23 Sep 2009 - 11:28)

Ca serait pas parce que ta <div> à 40 est dans une <div> à 20 ?

Parce que 20 c'est inférieur à 30.

Rude

Oui mais ma div à 40 devrait passer au dessus de celle de 30 non? Même si y a de l'héritage çà ne doit pas être ris en compte car je redéfinis cette valeur, non?

Bon à force d'avoir lu des sujets, j'ai du me rendre à l'évidence ce n'est donc pas possible et ce n'est pas un bug.

Je donne la solution de rechange que j'ai trouvé pour ceux que çà intéresse :

La div 4 est appelé au même niveau que la div 3. Et pour remédier au problème de position je lui retire en top et en left l'offset de la div 2.

Comme çà la div 4 (calque de sortie) apparait bien en haut à gauche du site ^^.

Voilà .

une piste quizz css niveau moyen

a écrit :
Explication : On pense souvent que les éléments positionnés en absolu se placent, à l'aide des propriétés top, right, bottom et left, par rapport aux limites de la zone d'affichage du navigateur, ou bien par rapport aux limites de l'élément body.
Mais pour être très exact, un élément positionné en absolu, si on utilise les propriétés top, right, bottom et left (ce qui n'est pas nécessairement le cas), se placera par rapport aux limites de son plus proche ancêtre positionné.
On dit qu'un élément est positionné lorsque la valeur de la propriété position pour cet élément est absolute, fixed ou relative.
En l'absence d'élément parent ou d'ancêtre positionné, le référent utilisé sera la fenêtre du navigateur (ou, pour certains navigateurs, l'élément html, ce qui revient généralement au même).

ça vaut aussi pour le z-index
on choisit pas sa couleur on choisit pas ses parents...