絶対配置された親を絶対配置された子の上に表示するようにします。

Question

絶対配置された子を絶対配置された親の後ろに表示しようとしています。青い親は赤い子の上に表示されます。

子供にz-index: -1を設定しようとしましたが、赤い子供が見えなくなりました。

.container { 
 
    position:relative; 
 
    background-color:grey; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
.parent { 
 
    background-color:blue; 
 
    position:absolute; 
 
    top: 50px; 
 
    left: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
} 
 
.child { 
 
    position:absolute; 
 
    top:-5px; 
 
    right: 0px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    background-color:red; 
 
}

<div class="container"> 
 
<div class="parent"> 
 
    <div class="child"></div> 
 
</div> 
 
</div>

https://jsfiddle.net/dwil30/mh3qw64x/

Answer 1

うーん...それは少しハックようだが、その通話:)

あなたがそうでない場合は、レンダラ以来containerのz-indexを指定する必要がありますあなたの子供を比較する "基本"値はありません。ここで

は作業フィドルです：

Answer 2

セパレート

https://jsfiddle.net/cmvwLseo/

乾杯子と親のdiv彼らはその後、位置決めするためのロジックを更新し、共通の「コンテナ」の両方に位置決めしているので、子に応じて、それぞれのz-indexプロパティを設定します。

.container { 
 
    position:relative; 
 
    background-color:grey; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 

 
.parent { 
 
    background-color:blue; 
 
    position:absolute; 
 
    top: 50px; 
 
    left: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
    z-index:2; 
 
} 
 
.child { 
 
    position:absolute; 
 
    top:50px; 
 
    left: 90px; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    background-color:red; 
 
    z-index:1; 
 
}

<div class="container"> 
 
    <div class="parent"> 
 
    </div> 
 
    <div class="child"> 
 
    </div> 
 
</div>