z-indexを使って3つのレベルのdivを順番に表示する方法はありますか？

Question

htmlコードは以下の通りである：

<div class="first common"> 
    i am the first div. 
    <div class="second common"> 
     i am the second div. 
     <div class="third common"> 
      i am the third div. 
     </div> 
    </div> 
</div> 

はCSS：

.common { 
    position: absolute; 
    left: 50px; 
    top: 50px; 
    width: 200px; 
    height: 200px; 
    color: #fff; 
} 
.first { 
    background-color: #8EE5EE; 
} 
.second { 
    background-color: #7A67EE; 
} 
.third { 
    background-color: #0000AA; 
} 

を次のように結果があるそして今、私は前に最初のdivを配置します、中間の2番目のdivと3番目のdivの後ろに（逆に）可能であればz-indexを使用します。 しかし、私はどのように行うか分からない。

Answer 1

そのhtmlではできません。他のdivの子であるdivは、z-indexに関係なく背後に表示されません。このように再構築：

.outer { 
 
    position: relative; 
 
} 
 

 
.common { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    color: #fff; 
 
} 
 

 
.first { 
 
    background-color: #8EE5EE; 
 
    left: 50px; 
 
    top: 50px; 
 
    z-index: 3; 
 
} 
 

 
.second { 
 
    background-color: #7A67EE; 
 
    left: 100px; 
 
    top: 100px; 
 
    z-index: 2; 
 
} 
 

 
.third { 
 
    background-color: #0000AA; 
 
    left: 150px; 
 
    top: 150px; 
 
    z-index: 1; 
 
}

<div class="outer"> 
 
    <div class="first common"></div> 
 
    <div class="second common"></div> 
 
    <div class="third common"></div> 
 
</div>

Answer 2

はこれを試してみてください。 wrapperクラスにラップしました。 commonクラスの左と上の位置を逆にします。 z-indexを使用する必要はありません。 JS/jqueryのオプションを使用して

.wrapper { 
 
    position: absolute; 
 
    left: 200px; 
 
    top: 200px; 
 
} 
 

 
.common { 
 
    position: absolute; 
 
    left: -50px; 
 
    top: -50px; 
 
    width: 200px; 
 
    height: 200px; 
 
    color: #fff; 
 
} 
 
.first { 
 
    background-color: #0000AA; 
 
} 
 
.second { 
 
    background-color: #7A67EE; 
 
} 
 
.third { 
 
    background-color: #8EE5EE; 
 
}

<div class="wrapper"> 
 
<div class="first common"> 
 
    <div class="second common"> 
 
     <div class="third common"> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 3

<div class="common"> 
    <div class="first">i am the first div.</div> 
    <div class="second">i am the second div.</div> 
    <div class="third">i am the third div.</div> 
</div> 



.common { 
position: relative; 
color: #fff; 
} 

.first { 
position: absolute; 
background-color: #8EE5EE; 
z-index:1; 
left:50px; 
top:50px; 
width:200px; 
height:200px; 
} 

.second { 
background-color: #7A67EE; 
position: absolute; 
z-index:2; 
width:200px; 
height:200px; 
left:100px; 
top:100px; 
} 

.third { 
background-color: #0000AA; 
position: absolute; 
z-index:3; 
left:150px; 
top:150px; 
width:200px; 
height:200px; 
}