how to make angular material component appear on top the navbar?

问题

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.

this is my bootstrap 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>

and this is my searchbar component,

<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?

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

回答1:

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

来源：https://stackoverflow.com/questions/61955281/how-to-make-angular-material-component-appear-on-top-the-navbar