How to stop overflow from interfering z-index? - html

Question

I have a 'ul' with dynamic data. Each list inside has an user image, and when you hover on the image, an info box will show up on the left side of the 'ul'.
When I set the 'ul' to be overflow-y:scroll, the part of the info box that's outside of the 'ul' will be cut.
Here's what it should look like. The blue area is the info box.
Here's what it looks like now: The blue area is cut.
Here's the 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%;
}
Here is the 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:
The reason I set overflow-y:scroll; is that I need the ul to be scrollable and thus when there are hundreds of data, the 'ul' list will be shorter than the screen, and user can just scroll inside it to view each list.
Here is a jsfiddle link: https://jsfiddle.net/7gr7jvvh/
Please uncomment overflow-y:scroll. You will see the difference.

Answer 1

Take a look at given jsfiddle code hope you want this thing:
.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>