如何使角形材质分量出现在导航栏的顶部? [英] how to make angular material component appear on top the navbar?

问题描述

正如您在我的搜索组件(这是material.angular.io中的自动填充组件)上方的图片中所看到的，在导航栏(绿色)结束后显示其选项，我希望我的选项显示在搜索框的正下方，在绿色导航栏上.

As you can see in the picture above my search component(which is an autofill component from material.angular.io) displays its options after the navbar(green) ends, I want my options to display right under the search box, on top the green navbar.

这是我的引导导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light mynavbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link nav-link-r" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link nav-link-r" href="#">Link</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle nav-link-r" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
  <app-search-bar></app-search-bar>
  </div>
  </nav>

这是我的搜索栏组件，

<form class="example-form">
      <input type="text"
             placeholder="Pick one"
             aria-label="Number"
             matInput
             [formControl]="myControl"
             [matAutocomplete]="auto"
             style="border-style: none; height:100%; width:100%;"
            >
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
  </form>

是什么导致选项在导航栏之后出现?我该如何纠正?

what's causing the options to appear after the navbar? how do I correct it?

更新* 我删除了导航栏，然后将表单放置在样式为background:turquoise，z-index:0的div内，并给表单设置了z-index:1，但仍在div下弹出

UPDATE* I removed the navbar and put the form inside a div with styles background:turquoise , z-index:0 and gave the form an z-index:1, still it pops up under the div

推荐答案

使用示例形式类的z-index属性高于导航栏

Use z-index property of example-form class higher than that of navbar

这篇关于如何使角形材质分量出现在导航栏的顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！