Html 如何阻止溢出干扰z索引？

我有一个动态数据的“ul”。其中的每个列表都有一个用户图像，当您将鼠标悬停在图像上时，“ul”的左侧将显示一个信息框

当我将“ul”设置为overflow-y:scroll时，信息框中“ul”之外的部分将被剪切

下面是它应该是什么样子。蓝色区域是信息框。

现在看起来是这样的：蓝色区域被切割了。

以下是css代码：

.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%;
 }

以下是html代码：

<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>

更新： 我设置overflow-y的原因：滚动；我需要ul可滚动，因此当有数百个数据时，“ul”列表将比屏幕短，用户只需在其中滚动即可查看每个列表。

下面是一个JSFIDLE链接：

---

请取消对overflow-y:scroll的注释。你会看到区别

看一看给定的JSFIDLE代码，希望您想要这样：

.popursvplist li{背景：白色；列表样式类型：无；填充：12px 15px；颜色：黑色；}
Popupsvplist li:第n个孩子（奇数）{背景：rgba（241242242,1）；}
Popupsvplist先生{
左侧填充：0px；
/*溢出y：滚动*/
身高：70%；
位置：相对位置；
}
.hoverToShowInfo{
位置：相对位置；
}
.hoverToShowInfo.infoinfo{
显示：无；
}
.资讯组{
宽度：270px；
}
.hoverToShowInfo:hover.infoinfo{
位置：绝对位置；
左：0px；
顶部：-60px；
显示：块；
z指数：10；
最高：100%；
高度：100px；
溢出y：滚动；
}
span.rightNames{
颜色：白色；
}
.infoBoxFirstLine{
背景：rgba（49,66,84,1）；
最小高度：自动；
最大宽度：270px；
填充：12px 15px；
}

创建一个代码笔或JSFIDLE或其他东西。很难说出你想要什么。现在你的代码什么都没显示？请分享你的全部信息code@sheriffderek在我设置overflow:hidden，overflow-y:scroll之后，信息框将被ul表格的边缘切割。您可以从更新的图片中看到。@Naila代码的其余部分仅用于UI颜色和数据。这应该是全部。我想你可以用

溢出：可见
来解决这个问题，但是我们可以在没有相关代码的情况下提出任何建议谢谢，但是我需要“ul”可以滚动。每个“&用户名”只需要一个蓝色信息框。此外，蓝色框应出现在“ul”区域的左侧和外部。因此ul可滚动应为相应的y轴或x轴，因为如果记录增加，则表示
的数量增加，因此高度相应地增加x轴或鼠标悬停在