divの下にz-indexを使って要素を配置します

Question

親の下に来る子divを配置しようとしました。

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

私は青と黄色の下の上にあることを赤い四角形を配置します。私はそれらの3つにz-インデックスを入れました。ただし、動作しません。

あなたはこれについてどう思いますか？ありがとう！

更新：ボックスが正しい順序であるが、しかし、これらのボックス内の要素は今、クリックできません。あなたがここでエラーを見てみることができます

：https://jsfiddle.net/p1xd6zah/

Answer 1

をあなたはがz-indexでをハック行うことができます。

1. あなたはbox2にz-index: -1を追加することができます。 （親以下子スタック）

2. box3にz-index: -2とposition: relativeを追加（今、このbox2後ろをスタック）

box1からz-indexを削除する - デモ下記参照：

を

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