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移到myprogram_list元素的下一个，因此它们都位于同一“层”上。您将必须编写一些逻辑以将菜单放置在每个可选选项的底部。但是由于您正在使用Angular，这应该是最少的问题了：）

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

1 个答案: