Positionieren Sie ein Element unter einem Div mithilfe von Z-Index

Question

Ich habe versucht, ein Kind div, die unter dem übergeordneten Element und über die anderen Elemente kommen.

.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>

Ich möchte das rote Rechteck positionieren unter dem blauen und über die gelb. Ich habe den Z-Index auf drei von ihnen gesetzt. Es funktioniert jedoch nicht.

Was denken Sie darüber? Vielen Dank!

aktualisieren: Obwohl die Boxen in der richtigen Reihenfolge sind, können die Elemente innerhalb dieser Boxen jedoch jetzt nicht mehr angeklickt werden.

Sie können den Fehler mal hier vorbeischauen: https://jsfiddle.net/p1xd6zah/

Answer 1

Sie ein mit z-index hacken tun können:

1. Sie z-index: -1-box2 hinzufügen können. (Stapelt die Kind unter dem Eltern)

2. hinzufügen z-index: -2 und position: relative-box3 (jetzt stapeln diese hinterbox2)

entfernen die z-index von box1 - siehe Demo unter:

.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>