干渉しているZ-インデックスからのオーバーフローを防ぐには？

Question

私は動的データで 'ul'を持っています。内部の各リストにはユーザーイメージがあり、イメージ上にマウスを置くと、 'ul'の左側にインフォボックスが表示されます。

'ul'をoverflow-y：scrollに設定すると、 'ul'の外側にある情報ボックスの部分がカットされます。

次のようになります。青色の部分はインフォボックスです。

ここは次のようなものです。青い部分がカットされています。

ここCSSコードは次のとおり

<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： Iオーバーフロー-Y設定理由：ここ

.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をスクロール可能にする必要があるので、何百ものデータがある場合、 'ul'リストは画面よりも短くなり、ユーザーはそれをスクロールして各リストを表示できます。

ここにはjsfiddleリンクがあります。https://jsfiddle.net/7gr7jvvh/ オーバーフロー-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>