z指數爲-1的元素根據祖父母的分區

將z-index:-1置於絕對孩子使祖父母下的分區。我如何讓絕對孩子去父母的div而不是祖父母的div？z指數爲-1的元素根據祖父母的分區

.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

來源

2017-10-04 Ismail Rubad

如果你發現我的答案有幫助，請其標記爲檢查（有益） –

@AwsmeSandy你能解釋這一點給我嗎？或者建議我寫一篇文章讓自己清楚。 –

如果你正在玩z-index有兩個元素，你可以給z-index指向那裏的父母，所以祖父母的z-index作爲子div的基礎。 –

這裏是你想要的東西，添加position: relative;到granparent所以它的z-index: 0;工作。

.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

來源

2017-10-04 07:13:47

z指數爲-1的元素根據祖父母的分區

回答

相關問題