如何阻止干扰z-index溢出？

Question

我有动态数据'ul'。里面的每个列表都有一个用户图像，当你将鼠标悬停在图像上时，会在'ul'的左侧显示一个信息框。

当我将'ul'设置为溢出时：滚动，将删除“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'列表将短于屏幕，用户可以在其中滚动查看每个列表。

这是一个jsfiddle链接：https://jsfiddle.net/7gr7jvvh/ 请取消注释overflow-y：滚动。你会看到差异。

Answer 1

看看给定的jsfiddle代码希望你想要这个东西：

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