即使使用z-index，Div也不会与父div重叠，隐藏溢出

Question

我有一种情况，我希望菜单列表选项在边界div之外打开。我使用过z-index，但根本没用。请帮我。 This is the issue

Html：

<div class="myprogram_list" #myprogram_list>
<div *ngFor='let myProgram of myPrograms;let i = index; trackBy:trackElement' class="col-md-3 programLists square-box-{{myProgram.rowIndex}}">
  <div class="programInfo">
    <a data-toggle="dropdown" class="dropdown-toggle" (click)="myProgram[i] = !myProgram[i]"><b>{{i}}</b></a>
    <span class="">{{myProgram.programName}}</span>
    <span class="">{{myProgram.leadPartner}}</span>
  </div>
  <div class="dropdown" [ngClass]="myProgram[i] ? 'open' : 'close'">
    <ul class="quickMenuOptions nopadding dropdown-menu">
      <li><a href="/quicklaunch"><i class='quickLaunch'></i>&nbsp; Quick launch</a></li>
      <li><a href="/program"><i class='managerMenber'></i>&nbsp;Manage member(s)</a></li>
      <li><a href="/program"><i class='managerExpert'></i>&nbsp;Manage expert(s)</a></li>
      <li><a href="/program"><i class="archiveProgram"></i>&nbsp;Archive program</a></li>
      <li><a href="/program"><i class="deleteProgram"></i>&nbsp;Delete program</a></li>
    </ul>
  </div>
</div>

Answer 1

由于缺少声誉，我无法发表评论，但您是否已经尝试将“下拉”的css位置设置为像absolute，然后尝试设置z-index？并且myprogram_list不应该有overflow:hidden。在这种情况下，你必须将下拉列表OUT但NEXT移动到myprogram_list元素，这样两者都在同一个“层”上... O.c.您必须编写一些逻辑来将菜单放在每个可选项的底部。但是因为你正在处理Angular应该是问题中最小的:)