自定义选择输入Angular 4

Question

我目前在 Angular 4.x 中构建了一个自定义下拉组件，这是它的模板：

<div class="vet-input-container vet-input-container--select" [ngClass]="inputClass()" [ngSwitch]="type">
  <div class="vet-input-area" (click)="toggleOpen($event)">
    <button tabindex="-1" type="button" mat-raised-button color="primary" class="vet-input-label vet-btn vet-btn--fit" *ngIf="labeled">
      <i [ngClass]="labelIconClass"></i>
    </button>
    <input type="text" class="vet-input">
    <i class="fa fa-caret-down vet-input-dropdown-icon"></i>    
  </div>
  <div class="vet-input-options">
    <div class="option" *ngFor="let item of collection">
      {{displayFn(item)}}
    </div>
  </div>
  <div class="vet-input-errors">
    <ng-content></ng-content>
  </div>
</div>

我的问题是当我打开“选项 div”时，这个元素被其他元素重叠，而不是 mi 自定义组件。我知道 z-index，但是把它放在我的组件上，强制我每次都检查其他同级元素，这使得组件不可重用。

我检查了 semantic.css 和 bootstrap 下拉组件，它们在组件内的元素中定义了 z-index 样式，这让我感到困惑。

另一方面，检查 angular 2 材质选择并将其放在覆盖元素中，这样自定义选择覆盖所有元素是有意义的。

请解释一下semantic.css 和bootstrap 的下拉菜单如何覆盖所有同级元素，无论级别如何。

更新：我尝试用语义 UI 和 ng-primefaces 下拉组件替换我的模板，但两者都被同级组件重叠。

这是包含我的自定义输入和选择组件的布局。兄弟输入覆盖了选择选项。

<div class="flex flex-col-layout ai-stretch">
      <app-dnj-input placeholder="Nombre de su veterinaria" formControlName="branchName">
      </app-dnj-input>
      <app-dnj-input placeholder="Nombres" formControlName="veterinarianName">
      </app-dnj-input>
      <app-dnj-input placeholder="Apellidos" formControlName="veterinarianLastName">
      </app-dnj-input>
      <app-dnj-input placeholder="Correo electrónico" formControlName="veterinarianEmail">
      </app-dnj-input>
      <app-dnj-input placeholder="Repita su correo" formControlName="veterinarianConfirmEmail">
      </app-dnj-input>
      <app-dnj-input placeholder="Contraseña" formControlName="veterinarianPassword">
      </app-dnj-input>
      <app-dnj-input placeholder="Repita su contraseña" formControlName="veterinarianConfirmPassword">
      </app-dnj-input>
      <app-dnj-select placeholder="rol" formControlName="veterinarianRole"[collection]="roleList"
      [displayFn]="displayRoleFn">
      </app-dnj-select>
      <app-dnj-input placeholder="rol" formControlName="veterinarianRole" type="select" [collection]="roleList"
      [displayFn]="displayRoleFn">
      </app-dnj-input>
    </div>

Answer 1

给vet-input-container position: relative 然后菜单选项应该给定 position: absolute 和 z-index: 100 （数量并不重要，只要它高于你的其他内容）。