Comment un élément peut-il être placé derrière son parent mais toujours devant ses grands-parents?

Question

J'ai trois éléments empilés les uns dans les autres. Maintenant, je veux que l'élément le plus profond soit placé derrière son parent mais toujours devant ses grands-parents. J'ai essayé différentes variations sur les paramètres d'index z, mais je n'ai pas eu de succès.

Le code qui Shoul fonctionne comme ma compréhension de z-index est:

<div style="width: 400px; height: 400px; background-color: purple; position: relative; z-index: 1;"> 
    <div style="width: 200px; height: 200px; background-color: blue; position: relative; z-index: 1;"> 
     <div style="width: 100px; height: 100px; background-color: green; position: relative; z-index: -1;"></div> 
    </div> 
</div> 

Sauf qu'il ne fonctionne pas.

Une solution?

Answer 1

Si vous supprimez le parent de position de la seconde div il fonctionnera

CSS

.div1{ 
    width: 400px; 
    height: 400px; 
    background-color: purple; 
    position: relative; 
    z-index: 1; 
} 

.div2{ 
    width: 200px; 
    height: 200px; 
    background-color: blue; 
    z-index: 1; 
} 

.div3{ 
    width: 100px; 
    height: 100px; 
    background-color: green; 
    position: relative; 
    z-index: -1; 
    left:150px; 
} 

HTML

<div class='div1'> 
    <div class='div2'> 
     <div class='div3'></div> 
    </div> 
</div> 

exemple: http://jsfiddle.net/MFULL/90/

Answer 2

Tant que les éléments font partie du flux de la page, un parent ne peut pas être devant ses enfants.

Vous devez utiliser le positionnement absolu pour retirer les éléments du flux de la page, afin de les empiler de cette façon.

Answer 3

Si vous voulez dire comme:

<div id="a"> 
    <div id="b"> 
     <div id="c"> 
     </div> 
    </div> 
</div> 

Ensuite, vous pouvez utiliser la méthode suivante:

Démo:http://jsfiddle.net/ZmvKX/

#a { 
    width: 300px; height: 300px; border: 1px solid black; background-color: #000; 
    z-index: -1; position: absolute; 
} 

#b { 
    width: 200px; height: 200px; border: 1px solid black; padding: 10px 10px; top: 100px; left: 100px; background-color: #ff0; 
    position: relative; 
} 

#c { 
    width: 100px; height: 100px; border: 1px solid black; padding: 10px 10px; top: -50px; left: -50px; background-color: #fff; 
    position: absolute; z-index: -2; 
} 

L'astuce est d'obtenir le contexte d'empilement droit.