Wie kann man den Überlauf vom störenden Z-Index stoppen?

Question

Ich habe eine 'ul' mit dynamischen Daten. Jede Liste enthält ein Benutzerbild, und wenn Sie den Mauszeiger über das Bild bewegen, erscheint auf der linken Seite der 'ul' eine Infobox.

Wenn ich die 'ul' auf Überlauf-y: scroll einstellen, wird der Teil der Infobox, der außerhalb der 'ul' liegt, ausgeschnitten.

So sollte es aussehen. Der blaue Bereich ist die Infobox.

So sieht es jetzt aus: Der blaue Bereich wird abgeschnitten.

Hier ist die CSS-Code:

.popUpRSVPList{ 
    padding-left:0px; 
    overflow-y: scroll; 
    height: 70%; 
    position: relative; 
} 
.hoverToShowInfo{ 
    position: relative; 
} 
.hoverToShowInfo .infoinfo { 
    display: none; 
} 
.hoverToShowInfo:hover .infoinfo { 
    position:absolute; 
    left:-280px; 
    top: -60px; 
    display:block; 
    z-index: 10; 
    top: 100%; 
} 

Hier ist der HTML-Code:

<ul class="popUpRSVPList" > 
    <li style="padding-left:20px;"> 
    <a class="hoverToShowInfo" href=""> 
     <!--Left Info Box, will show on hover--> 
     <div class="col-sm-12 infoinfo" > 
    </a> 
    </li> 
</ul> 

UPDATE: Der Grund, warum ich Überlauf-y gesetzt: blättern; ist, dass ich brauche die ul scrollbar und damit, wenn es Hunderte von Daten, die 'ul' Liste wird kürzer sein als der Bildschirm, und Benutzer kann nur innerhalb es scrollen, um jede Liste zu sehen.

Hier ist ein jsfiddle Link: https://jsfiddle.net/7gr7jvvh/ Bitte Kommentar Überlauf-y: scroll. Sie werden den Unterschied sehen.

Answer 1

Werfen Sie einen Blick auf bestimmten jsfiddle Code hoffen, dass Sie diese Sache wollen:

.popUpRSVPList li { background: white; list-style-type:none; padding:12px 15px; color: black;} 
 
.popUpRSVPList li:nth-child(odd) { background: rgba(241,242,242,1); } 
 
.popUpRSVPList{ 
 
    padding-left:0px; 
 
     
 
/* overflow-y: scroll;*/ 
 
    height: 70%; 
 
    position: relative; 
 
     
 
} 
 

 
.hoverToShowInfo{ 
 
    position: relative; 
 
} 
 
.hoverToShowInfo .infoinfo { 
 
    display: none; 
 
} 
 

 
.infoinfo div{ 
 
    width:270px; 
 
} 
 
.hoverToShowInfo:hover .infoinfo { 
 
    position:absolute; 
 
    left:0px; 
 
    top: -60px; 
 
    display:block; 
 
    z-index: 10; 
 
    top: 100%; 
 
    height: 100px; 
 
    overflow-y: scroll; 
 
} 
 
     span.rightNames { 
 
    color: white; 
 
} 
 
.infoBoxFirstLine{ 
 
    background:rgba(49,66,84,1); 
 
    min-height:auto; 
 
    max-width:270px; 
 
    padding:12px 15px; 
 
    
 
}

<ul class="popUpRSVPList" > 
 
<li style="padding-left:20px;"> 
 
    <a class="hoverToShowInfo" href=""> 
 
    &User Name 
 
<!--Left Info Box, will show on hover--> 
 
    <div class="col-sm-12 infoinfo" > 
 
     <div class="infoBoxFirstLine row " > 
 
     
 
     <!--attendee profile image w--> 
 
      <div class="leftImage" > 
 
       <img src="" style="border-radius:150px; width:50px; height:50px;"/> 
 
      <!--attendee name w--> 
 
      <span class="rightNames" style=""> 
 
       NAME 1 
 
       </span> 
 
      </div> 
 
     <!--end--> 
 
     
 
    </div> 
 
     <div class="infoBoxFirstLine row " > 
 
     
 
     <!--attendee profile image w--> 
 
      <div class="leftImage" > 
 
       <img src="" style="border-radius:150px; width:50px; height:50px;"/> 
 
      <!--attendee name w--> 
 
      <span class="rightNames" style=""> 
 
       NAME 1 
 
       </span> 
 
      </div> 
 
     <!--end--> 
 
     
 
    </div> 
 
     <div class="infoBoxFirstLine row " > 
 
     
 
     <!--attendee profile image w--> 
 
      <div class="leftImage" > 
 
       <img src="" style="border-radius:150px; width:50px; height:50px;"/> 
 
      <!--attendee name w--> 
 
      <span class="rightNames" style=""> 
 
       NAME 1 
 
       </span> 
 
      </div> 
 
     <!--end--> 
 
     
 
    </div> 
 
    </div> 
 
    </a> 
 
    </li> 
 
    </ul>