显示Angular2 z-index中的下拉菜单不起作用

Question

当用户在搜索栏中输入查询时，我会显示一个下拉菜单。下拉列表在页面加载时加载，项目由模板中加载的ngFor填充。我唯一的问题是z-index为9999的元素是下拉列表的父div，它也有一个绝对的位置，但仍显示在所有内容下。

以下是用于下拉菜单的HTML：

<div class="wrapper">
    <form #f="ngForm" (ngSubmit)="onSubmit(f.value)" class="form-inline row">
        <div class="form-group col-xs-11 no-padding">
            <input type="text" class="form-control" required ngControl="query" (keyup)="onKey(f.value)">

        </div>

        <button type="submit" class="btn btn-primary col-xs-1"><i class="fa fa-search" aria-hidden="true"></i></button>
    </form>
    <div class="row">
        <div class="col-sm-12 no-padding">
            <div id="search-suggestions" *ngIf="terms && terms.length > 0">
                <ul>
                    <li *ngFor="#term of terms">{{term[0]}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

以下是对象的CSS：

  #search-suggestions {
    border: 1px solid $gray-lighter;
    width: 100%;
    height: auto;
    position: absolute;
    text-align: left;
    border-radius: $border-radius;
    background-color: rgba(255,255,255,.8);
    z-index: 99999;
    opacity:1;
    position: absolute;

    ul {
      padding: 2px;
      margin-bottom: 0;

      li {
        list-style: none;
        line-height: 1.5rem;
        border-radius: $border-radius;
        padding: 5px 10px;

        &:hover {
          background: $gray-lighter;
          cursor: pointer;
        }
      }
    }
  }

以下是所发生情况的屏幕截图：