2017-10-04 15 views
0

En mettant z-index:-1 dans absolute-child, le div devient le grand-parent. Comment puis-je faire absolu-enfant aller sous le div div et non le grand-parent div?L'élément avec l'index z -1 passe sous la division grand-parent

.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

+0

Si vous avez trouvé cette réponse utile, s'il vous plaît marquer comme chèque (helpfull) –

+0

@AwsmeSandy Pouvez-vous expliquer un peu pour moi? Ou suggère moi un article pour me rendre clair. –

+1

Si vous jouez avec l'index z avec deux éléments, vous pouvez aussi donner z-index à parent, donc le grand-père z-index sert de base pour les divs enfants. –

Répondre

1

Voici ce que vous voulez, a ajouté position: relative; à l'granparent de sorte que le travail z-index: 0; pour elle.

.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