CSS: machen Element-Overlay jedes andere Element

Question

Ich mache Dropdown-Menü für mein Hauptmenü, gibt es Benutzername, wo der Benutzer klickt und dann zeigt es den Inhalt (Dropdown-Menü), Dies wurde durch Kontrollkästchen Eingabe für die Schaltfläche.

Leider scheint das Menü überhaupt nicht zu erscheinen und verschwindet am Ende des Menüs.

Menü:

HTML:

<div class="profilebar"> 
     <div class="dropdown" style="cursor: pointer;"> 
      <input type="checkbox" id="droptoggle" class="toggled"> 
      <label for="droptoggle" class="profilename" style="cursor: pointer;">{{ username }}<span class="caret">&blacktriangledown;</span></label> 
      <ul class="dropdown-menu" role="menu"> 
       <li class="sub-menu"> 
        <a href="/">Link1</a> 
        <a href="/">Link2</a> 
        <a href="/">Link3</a> 
        <a href-"/">Link4t</a> 
       </li> 
      </ul> 
     </div> 
     <img class="profilepicture" src="url here"></img> 
     <p class="balance" style="text-decoration:none">${{ balance }}</p> 
    </div> 
</div> 

CSS:

.profilebar { 
    float: right; 
    width: 150px; 
    height: 7%; 
    margin-top: 0.5%; 
    margin-right: 1.5%; 
    min-width: 70px; 
} 
.profilename { 
    position: relative; 
    font-family: 'Lato', sans-serif; 
    font-weight: 400; 
    width: 0.5%; 
    font-size: 11pt; 
    color: white; 
    text-decoration: none; 
} 
.caret { 
    margin-left: 3.5%; 
    font-size: 8pt; 
} 
.dropdown { 
    position: relative; 
    display: inline-block; 
    margin-top: 0%; 
    margin-left: 4%; 
} 
.dropdown-menu { 
    display: none; 
    position: absolute; 
    margin: 2px; 
    width: 10px; 
    min-width: 10px; 
    background-color: white; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 99; 
} 
.dropdown-menu a { 
    color: white; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 
.dropdown-menu + a:hover { 
    background-color: #C90205 
} 
.toggled { 
    visibility: hidden; 
    display: none; 
} 
.profilepicture { 
    position: absolute; 
    margin-left: 1.2%; 
    border-style: groove; 
    border-width: 1.5px; 
} 
.balance { 
    position: relative; 
    margin-top: 2.3%; 
    color: red; 
    font-family: 'Lato', sans-serif; 
    font-weight: 400; 
    font-size: 12pt; 
    color: #C90205; 
    margin-left: 44.5%; 
} 
.toggled:checked ~ .dropdown-menu { 
    display: block; 
    z-index: 99; 
} 

Fiddle (Schauen Sie nicht auf Bild, es Platzhalter sowieso).

---

Also, was kann das Problem sein? Ich habe versucht, Z-Index auf positionierte Elemente, die nicht funktionieren schien, wie kann ich Drop-Down-Menü überlagern jedes andere Element, so dass es vollständig gesehen werden kann?

Answer 1

Das Menü hat overflow: hidden, so wird es ausgeblendet, wenn über den Inhalt geht, die overflow: hidden aus der menu Klasse zu entfernen zeigt das Dropdown-Menü.

Fiddle

Answer 2

<style> 
.profilebar { 
/* float: right; 
    width: 150px; 
    height: 7%; 
    margin-top: 0.5%; 
    margin-right: 1.5%; 
    min-width: 70px; */ 
    position: absolute; 
    top: 0.5%; 
    right: 1.5%; 
    width: 150px; 
    height: 7%; 
    border: 1px solid #777; 
} 
.profilename { 
    position: relative; 
    font-family: 'Lato', sans-serif; 
    font-weight: 400; 
    width: 0.5%; 
    font-size: 11pt; 
    color: white; 
    text-decoration: none; 
} 
.caret { 
    margin-left: 3.5%; 
    font-size: 8pt; 
} 
.dropdown { 
    position: relative; 
    display: inline-block; 
    margin-top: 0%; 
    margin-left: 4%; 
} 

.dropdown label { 
    color: #333; 
} 

.dropdown-menu { 
    display: none; 
    position: absolute; 
    margin: 2px; 
    width: 100px; 
    min-width: 10px; 
    background-color: white; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 99; 
} 
.dropdown-menu a { 
    color: #333; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 
.dropdown-menu + a:hover { 
    background-color: #C90205 
} 
.toggled { 
    visibility: hidden; 
    display: none; 
} 
.profilepicture { 
    position: absolute; 
    margin-left: 1.2%; 
    border-style: groove; 
    border-width: 1.5px; 
} 
.balance { 
    position: relative; 
    margin-top: 2.3%; 
    color: red; 
    font-family: 'Lato', sans-serif; 
    font-weight: 400; 
    font-size: 12pt; 
    color: #C90205; 
    margin-left: 44.5%; 
} 
.toggled:checked ~ .dropdown-menu { 
    display: block; 
    z-index: 99; 
} 
</style> 
<body> 

<div class="profilebar"> 
     <div class="dropdown" style="cursor: pointer;"> 
      <input type="checkbox" id="droptoggle" class="toggled"> 
      <label for="droptoggle" class="profilename" style="cursor: pointer;">USERNAME<span class="caret">&blacktriangledown;</span></label> 
      <ul class="dropdown-menu" role="menu"> 
       <li class="sub-menu"> 
        <a href="/">Link1</a> 
        <a href="/">Link2</a> 
        <a href="/">Link3</a> 
        <a href="/">Link4</a> 
       </li> 
      </ul> 
     </div> 
     <img class="profilepicture" src="url here"></img> 
     <p class="balance" style="text-decoration:none">BALANCE</p> 
    </div> 
</div>