Div divisés et z-index intégrés

Question

J'essaie d'implémenter un menu déroulant, qui peut être réutilisé dans différents divs.

J'utilise position:relative pour le menu déroulant (il apparaîtra donc sous le bouton qui l'ouvre). Le problème est que le menu déroulant ne fait que recouvrir ses divs parents: si le menu déroulant chevauche un autre div (pas parent), quel que soit l'index z que j'ai défini, il est sous-jacent.

Existe-t-il une solution pour que l'élément positionné en absolu soit sur tout le reste?

(je dois utiliser les z-index pour d'autres raisons, et je ne peux pas l'affichage du menu: relative)

.back, .front, .back2{ 
 
    position: absolute; 
 
    width: 100px; 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
.back { 
 
    position:relative; 
 
    z-index: 10; 
 
    top: 20px; 
 
    left: 20px; 
 
    background: red; 
 
} 
 
.back2 { 
 
    position:relative; 
 
    z-index: 10; 
 
    top: 50px; 
 
    left: 20px; 
 
    background: orange; 
 
} 
 

 
.front { 
 
    position: absolute; 
 
    z-index:20; 
 
    top: 60px; 
 
    left: 60px; 
 
    background: green; 
 
}

<div class="back"> 
 
    <span >Parent div1</span> 
 
    <div class="front"> 
 
    <span >dropdown</span> 
 
    </div> 
 
</div> 
 

 
<div class="back2"> 
 
    <span >someOtherDiv</span> 
 
</div>

Answer 1

Il n'y a pas besoin de donner z-index parent div. Consultez ci-dessous l'extrait mis à jour

.back, .front, .back2{ 
 
    position: absolute; 
 
    width: 100px; 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
.back { 
 
    position:relative; 
 
    top: 20px; 
 
    left: 20px; 
 
    background: red; 
 
} 
 
.back2 { 
 
    position:relative; 
 
    top: 50px; 
 
    left: 20px; 
 
    background: orange; 
 
} 
 

 
.front { 
 
    position: absolute; 
 
    z-index:20; 
 
    top: 60px; 
 
    left: 60px; 
 
    background: green; 
 
}

<div class="back"> 
 
    <span >Parent div1</span> 
 
    <div class="front"> 
 
    <span >dropdown</span> 
 
    </div> 
 
</div> 
 

 
<div class="back2"> 
 
    <span >someOtherDiv</span> 
 
</div>

Selon votre question, vous ne pouvez pas supprimer z-index de parent div dans ce cas, vous pouvez mettre à jour plus z-index-parent div. Check extrait mis à jour ci-dessous ...

.back, .front, .back2{ 
 
    position: absolute; 
 
    width: 100px; 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
.back { 
 
    position:relative; 
 
    top: 20px; 
 
    left: 20px; 
 
    background: red; 
 
    z-index:10; 
 
} 
 
.back2 { 
 
    position:relative; 
 
    top: 50px; 
 
    left: 20px; 
 
    background: orange; 
 
    z-index:9; 
 
} 
 

 
.front { 
 
    position: absolute; 
 
    z-index:20; 
 
    top: 60px; 
 
    left: 60px; 
 
    background: green; 
 
}

<div class="back"> 
 
    <span >Parent div1</span> 
 
    <div class="front"> 
 
    <span >dropdown</span> 
 
    </div> 
 
</div> 
 

 
<div class="back2"> 
 
    <span >someOtherDiv</span> 
 
</div>