CSSで子の深さに親を設定する

Question

親divをその子にする必要があります。

私はz-indexを-1に設定しようとしましたが、それは最初のレベルで機能しますが、2つ以上の子の深度が必要です。

div { 
 
    width: 200px; 
 
    height: 300px; 
 
    overflow: visible; 
 
} 
 
.one { 
 
    position: relative; 
 
    background: green; 
 
} 
 
.two { 
 
    position: absolute; 
 
    background: red; 
 
    top: 0; 
 
    left: 100px; 
 
    z-index: -1; 
 
} 
 
.three { 
 
    position: absolute; 
 
    background: blue; 
 
    top: 0; 
 
    left: 150px; 
 
    z-index: -1; 
 
}

<div class="one"> 
 
    <div class="two"> 
 
    <div class="three">  
 
    </div> 
 
    </div> 
 
</div>

ので、どんなのz-index値のないものは二つの上にあるべきクラス、および二

三以上のおかげ

Answer 1

、要素は、彼らが表示される順序でスタックDOM内では、同じ階層レベルの下位階層が一番上に表示されます。静的でない配置を持つ要素は、常にデフォルトの静的な配置で要素の上に表示されます。

また、ネストが大きな役割を果たしていることにも注意してください。要素Bが要素Aの上に座っている場合は、要素Aの子要素は、異なるZを設定し、そのため、この

div { 
 
    width: 200px; 
 
    height: 300px; 
 
    overflow: visible; 
 
} 
 
.one { 
 
    position: absolute; 
 
    background: green; 
 
    z-index:2; 
 
} 
 
.two { 
 
    position: absolute; 
 
    background: red; 
 
    top: 50px; 
 
    left: 100px; 
 
    z-index: 1; 
 
} 
 
.three { 
 
    position: absolute; 
 
    background: blue; 
 
    top: 100px; 
 
    left: 150px; 
 
}

<div class="one"> 
 
</div> 
 
<div class="two"> 
 
</div> 
 
<div class="three"> 
 
</div>