如何阻止干擾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> 

UPDATE： 我設定溢出-Y的原因是：滾動;是我需要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>