Positionner un élément sous un div en utilisant z-index

Question

J'ai essayé de placer un div enfant qui viendra sous son parent et sur les autres éléments.

.box1{ 
 
    background-color: blue; 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
    z-index: 3; 
 
} 
 

 
.box2{ 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 100px; 
 
    left: 30%; 
 
    top: 20px; 
 
    z-index: 2; 
 
} 
 

 
.box3{ 
 
    background-color: yellow; 
 
    width: 500px; 
 
    height: 100px; 
 
    z-index: 1; 
 
}

<div class="box1"> 
 
    <div class="box2"></div> 
 
</div> 
 
<div class="box3"></div>

Je veux placer le rectangle rouge sous le bleu et sur le jaune. J'ai mis le z-index sur trois d'entre eux. Cependant, cela ne fonctionne pas.

Que pensez-vous de cela? Merci!

Mise à jour: Bien que les boîtes sont dans l'ordre, cependant, les éléments à l'intérieur de ces boîtes ne peuvent pas être cliqués maintenant.

Vous pouvez jeter un oeil à l'erreur ici: https://jsfiddle.net/p1xd6zah/

Answer 1

Vous pouvez faire pirater avec z-index:

1. Vous pouvez ajouter z-index: -1-box2. (Stacks enfant en dessous du parent )

2. Ajouter z-index: -2 et position: relative-box3 (pile maintenant ce derrièrebox2)

Retirez le z-index de box1 - voir la démo ci-dessous:

.box1 { 
 
    background-color: blue; 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
.box2 { 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 100px; 
 
    left: 30%; 
 
    top: 20px; 
 
    z-index: -1; 
 
} 
 

 
.box3 { 
 
    background-color: yellow; 
 
    width: 500px; 
 
    height: 100px; 
 
    z-index: -2; 
 
    position: relative; 
 
}

<div class="box1"> 
 
    <div class="box2"></div> 
 
</div> 
 
<div class="box3"></div>