Z-Index funktioniert nicht mit geschachtelten absoluten Elementen

Question

Ich versuche, ein Dropdown zu entwickeln, das eine ul Liste enthält, die erweiterbar ist. Ein Element der Liste ist standardmäßig sichtbar. Wenn die Liste erweitert wird, sollten alle Elemente sichtbar sein und über dem Dropdown-Menü positioniert werden. Ich befestigte das Snippet und wie Sie sehen können, wird die Liste erweitert, aber die li Elemente sind nicht über das Dropdown, obwohl die eine absolute Position und eine größere z-index hat.

var dropdown = false; 
 
var list = false; 
 

 
function toggleList() { 
 
    toggle('.hidden', list); 
 
    list = !list; 
 
} 
 

 
function toggleDropdown() { 
 
    toggle('.dropdown', dropdown); 
 
    dropdown = !dropdown; 
 
} 
 

 
function toggle (selector, isAlreadyOpened) { 
 
    if(isAlreadyOpened) $(selector).hide(); 
 
    else $(selector).show(); 
 
}

.parent { 
 
    position: relative; 
 
    background-color: red; 
 
    width: 50%; 
 
} 
 

 
.dropdown { 
 
    width: 40%; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: 10; 
 
    overflow: hidden; 
 
} 
 

 
.list { 
 
    position: absolute; 
 
    z-index: 20; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
    <button onclick="toggleDropdown()">Toggle dropdown</button> 
 
    
 
    <div class="dropdown"> 
 
    First Dropdown 
 
    
 
    <button onclick="toggleList()">Toggle list</button> 
 
    <ul class="list"> 
 
     <li>1st element</li> 
 
     <li class="hidden">2nd element</li> 
 
     <li class="hidden">3rd element</li> 
 
     <li class="hidden">4th element</li> 
 
     <li class="hidden">5th element</li> 
 
     <li class="hidden">6th element</li> 
 
    </ul> 
 
    </div> 
 
</div>

Jemand weiß, wie auf diese helfen? Danke!

Answer 1

Entfernen Sie overflow: hidden von .dropdown und los gehts!

var dropdown = false; 
 
var list = false; 
 

 
function toggleList() { 
 
    toggle('.hidden', list); 
 
    list = !list; 
 
} 
 

 
function toggleDropdown() { 
 
    toggle('.dropdown', dropdown); 
 
    dropdown = !dropdown; 
 
} 
 

 
function toggle (selector, isAlreadyOpened) { 
 
    if(isAlreadyOpened) $(selector).hide(); 
 
    else $(selector).show(); 
 
}

.parent { 
 
    position: relative; 
 
    background-color: red; 
 
    width: 50%; 
 
} 
 

 
.dropdown { 
 
    width: 40%; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: 10; 
 
} 
 

 
.list { 
 
    position: absolute; 
 
    z-index: 20; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
    <button onclick="toggleDropdown()">Toggle dropdown</button> 
 
    
 
    <div class="dropdown"> 
 
    First Dropdown 
 
    
 
    <button onclick="toggleList()">Toggle list</button> 
 
    <ul class="list"> 
 
     <li>1st element</li> 
 
     <li class="hidden">2nd element</li> 
 
     <li class="hidden">3rd element</li> 
 
     <li class="hidden">4th element</li> 
 
     <li class="hidden">5th element</li> 
 
     <li class="hidden">6th element</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Nun, ich fühle mich tatsächlich ein bisschen dumm. Ich kam zu meinem Code zurück und ich bemerkte das overflow: hidden auf dem .dropdown Element. Ich habe es entfernt und das Problem behoben.