[Résolu] Superposition et z-index

Bonjour,
J'ai un souçis avec les z-index qui ne semble pas s'appliquer correctement malgrès le positionement de mes blocs.
Soit la structure suivante :

<div class="menuBox">
	    <div id="panel" class="panel">

		    <img src="struct/picto/previous.png" style="position:relative;top:10px;left:5px;" onclick="showPanel();" />

	    </div>
</div>

A laquelle j'associe le style suivant :

body{

	background-color:#2c2c2c;

}

.menuBox{

	width:500px;

	height:300px;

	/*background:url(struct/images/bg_menuBox.jpg) no-repeat;*/

	background-color:red;

	color:#2c2c2c;

	position:absolute;

	top:50%;

	left:50%;

	margin-left:-250px;

	margin-top:-150px;

	z-index: 10;

}

.panel{

color:#2c2c2c;

height:278px;

width:200px;

/*background:url(struct/images/panel.png) no-repeat;*/

background-color:green;

position:absolute;

top:11px;

left:-30px;

z-index: 5;

}

Malgrè son z-index inférieur le div #panel est toujours au dessus de son conteneur. Est ce justement car il y'a une relation père-fils entre ces deux bloc ?
Si oui y'a t'il une solution ?

Merci
Modifié par grunky (26 Feb 2009 - 13:37)

Bonjour,

a écrit :
Est ce justement car il y'a une relation père-fils entre ces deux bloc ?

Bien sûr.

Si tu poses une tasse de café sur un cahier, comment fais-tu passer le cahier au dessus de la tasse sachant que celle-ci doit toujours être sur le cahier ? C'est impossible...

Par contre, si tu poses la tasse de café à côté de ton cahier, tu peux facilement faire passer l'un au dessus de l'autre et vice-versa.

Donc pour résumer, ce que tu as fait et qui ne marche pas :

<div id="table">
     <div id="cahier">
          <div id="tasse"></div>
     </div>
</div>

Ce qui marche :

<div id="table">
     <div id="cahier"></div>
     <div id="tasse"></div>
</div>

Merci pour ta réponse , c'est résolu