zインデックスが-1の要素は、祖父母のdivの下にあります。

Question

z-index:-1を絶対子にすると、祖父母の下にdivが作成されます。どのように私は絶対的な子供を親のdivの下に行くようにするのですか？ここで

.grandparent{ 
 
    background:rgba(0, 128, 0, 0.89); 
 
    width:500px; 
 
} 
 

 
.parent{ 
 
    position:relative; 
 
    width:200px; 
 
    height:200px; 
 
    background:yellow; 
 
} 
 

 
.absolute-child{ 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    background:red; 
 
    top:10px; 
 
    right:-50px; 
 
    z-index:-1; 
 
}

<div class="grandparent"> 
 
    <div class="parent"> 
 
     <div class="absolute-child"> absolute ch 
 
     </div> 
 
     <div class="siblings">siblings</div> 
 
    </div> 
 
</div

Answer 1

何をしたいですが、それについてz-index: 0;作業はとてもgranparentにposition: relative;を追加しました。

.grandparent{ 
 
    background:rgba(0, 128, 0, 0.89); 
 
    width:500px; 
 
     z-index: 0; 
 
    position: relative; 
 
} 
 

 
.parent{ 
 
    position:relative; 
 
    width:200px; 
 
    height:200px; 
 
    background:yellow; 
 
} 
 

 
.absolute-child{ 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    top: 10px; 
 
    right: -50px; 
 
    z-index: -1; 
 
}

<div class="grandparent"> 
 
    <div class="parent"> 
 
     <div class="absolute-child"> absolute ch 
 
     </div> 
 
     <div class="siblings">siblings</div> 
 
    </div> 
 
</div