Mat expansion panel extend over other html elements

Question

I have a mat expansion panel that I would like to extend over the element below it rather than simply moving that element down. I tried adjust the z-index of the mat-expansion element but that did not work. I haven't seen anything in the angular material docs/github that suggests this can be done. Has anyone done this or know how this could be achieved?

Any help/tips/suggestions would be much appreciated.

UPDATE: my desired solution should look similar to this. It could contain several elements (mat-selection, date picker, etc..)

Answer 1

Big thanks to @wixFitz for getting me going in the right direction but here is the end product.

animation.html:

      <div class="report-filter">
    <button 
      mat-raised-button 
      class="filter-button"
      type="button"
      (click)="showDiv()"
      [ngClass]="{'menu-button-active': filterActive}">
      {{ 'TOOLTIP.filter' | translate }}
      <mat-icon>filter_list</mat-icon>
    </button>
    <div [@divState]="divState" class="menu mat-elevation-z8">
      <button
        class="center"
        mat-button
        (click)="closeMe()"
        mat-icon-button>
        <mat-icon>close</mat-icon>
      </button>
      <div class="search-brands">
        <mat-form-field>
          <mat-select placeholder="Brands" [(value)]="selectedBrand" panelClass="brandSelectDropdown">
            <mat-option (click)="resetBrand()" value="">none</mat-option>
            <mat-option *ngFor="let brand of brands" (click)="setBrand(brand.brand)" value="brand.brand">{{ brand.brand }}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
  </div>

animation.scss:

.report-filter {
 display: flex;
 .filter-button {
 margin: 1rem 0;
}

}

.menu {
 position: absolute;
 top: 248px;
 right: 23px;
 background-color: $grey600;
 border: 1px solid gray;
 border-radius: 4px;
 z-index: 2;
 .search-brands {
  margin: 2rem 1rem;
  border: 1px solid black;
  background-color: $grey300;
  mat-form-field {
   width: 95%;
   margin: 0rem .5rem;
  }
}
button {
 mat-icon {
  color: white;
  margin: 0 0 0 0;
  }
 }
}
.menu-button-active {
 background-color: $grey600;
 color: white;
}

animation.ts: In @Component object

  animations: [
   trigger('divState', [
    state('show', style({ height: '100vh', width: '20vw' })),
    state('hide', style({ height: '0vh', display: 'none'})),
    transition('show => hide', animate('200ms ease-out')),
    transition('hide => show', animate('300ms ease-in'))
   ])
  ]

global var

  divState: string = "hide";

open and close functions

  showDiv(){
   this.divState = (this.divState == 'hide') ? 'show' : 'hide';
   this.filterActive = !this.filterActive
   this.getBrands();
  }

  closeMe(){
   this.divState = 'hide';
   this.filterActive = !this.filterActive
  }