28172 sujets

CSS et mise en forme, CSS3

Divs imbriqués et z-index

Encore un boulet qui viens poser des questions sur le z-index, nan mais il a qu'à taper ca dans google...

C'est fait, rassurez vous. Et devant une telle quantité d'informations et une telle pollution (redondances), j'ai du me résigner à devoir poser la question en français ici. Google comprend pas ce que je veux.

J'ai bien compris le fonctionnement des Z-index, je ne suis pas un débutant en CSS, cela dit, j'ai un cas de figure problématique.

Mon code :


<html>
<head>
<style type="text/css">
body{
width:100px;
height:100px;
background:orange;
}

#bleu{
 position:absolute;
 z-index:10;
 top:0;
 left:0;
 width:40px;
 height:40px;
 background:blue;
}
#blanc{
 position:absolute;
 z-index:20;
 top:10px;
 left:10px;
 width:40px;
 height:40px;
 background:none;
 border:1px solid white;
}
#violet{
 position:absolute;
 z-index:15;
 top:20px;
 left:20px;
 width:40px;
 height:40px;
 background:purple;
}
</style>
</head>

<body>

   <div id='bleu'>
     <div id='blanc'></div>
   </div>
   <div id='violet'></div>

</body>
</html>


Vous pouvez le tester ici http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex1

Explication :

Vous avez 3 carrés, un bleu qui contient un blanc et un autre qui est violet au même niveau que le bleu.

Le bleu doit être SOUS le violet, mais le blanc doit être par DESSUS le violet ET le bleu. Voyez mon CSS et les z-index sont ok, le blanc a le z-index le plus élevé et le bleu le plus faible. Mais parce que le bleu est SOUS le violet, le blanc reste aussi dessous (vu que le div blanc est imbriqué dans le div bleu).

Qqn saurait comment on peut faire mon comportement souhaité ?
Exactement le z-index fonctionne uniquement avec des divs de même niveaux. C'est pour cela que l'on gère les systèmes des popups tout en haut ou en bas de page, proche du body.
Laurie-Anne a écrit :
Bonjour,

Tu peux obtenir le conportement que tu souhaites en mettant tous les divs au même niveau.


Je vois, alors faut que je repense mon histoire. Le truc c'est que j'ai un menu qui est dans un div entete, et j'ai un div pour le corps qui déborde par dessus mon entête, sauf que forcément le sous menu qui est dans l'entete passe derrière le corps et je pensais pouvoir contourner ce problème avec les z-index.

Merci pour cette réponse des plus limpides ^^
Sujet clos
Aller à