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

Question

我有一个包含动态数据的“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:scroll的原因；是我需要 ul 可以滚动，因此当有数百个数据时，“ul”列表将比屏幕短，用户只需在其中滚动即可查看每个列表。

这是一个 jsfiddle 链接:https://jsfiddle.net/7gr7jvvh/ 请取消注释 overflow-y:scroll。你会看到不同之处。

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>