How can I separate components within the same html in Angular material?

Question

I have a project in Angular material in which I have a component.html in which I define a form and a table with data.

In my project (first image) I have the title of the tab, a form to add a new record and the table where the records are displayed. What I want to achieve is the same as in the second image, that the components are overlapped.

This is my current window:

And this is what I want to achieve:

This is my component.html:

<div class="title">Customer registration</div>
<mat-divider></mat-divider>

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>New</mat-expansion-panel-header>
    <form [formGroup]="formNew">
      <mat-grid-list cols="4" rowHeight="50px" gutterSize="10px">
        <mat-grid-tile>
          <mat-form-field fxFlex>
            <input matInput placeholder="ID" formControlName="id">
          </mat-form-field>
        </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field fxFlex>
              <input matInput placeholder="First Name" formControlName="first_name">
              <mat-icon matSuffix>person_outline</mat-icon>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field fxFlex>
              <input matInput placeholder="Last Name" formControlName="last_name">
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field fxFlex>
              <input matInput placeholder="Phone" formControlName="phone">
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <div>
              <button mat-stroked-button (click)="save()">Add</button>
            </div>
          </mat-grid-tile>
      </mat-grid-list>
    </form>
  </mat-expansion-panel>
</mat-accordion>

<mat-card class="mat-elevation-z8">
  <mat-table [dataSource]="customers">

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.id}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="nombre">
      <mat-header-cell *matHeaderCellDef>First Name</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.first}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="apellido">
      <mat-header-cell *matHeaderCellDef>Last Name</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.last}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="telf">
      <mat-header-cell *matHeaderCellDef>Phone</mat-header-cell>
      <mat-cell *matCellDef="let customers"> {{customers.phone}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="act">
      <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-button><mat-icon>edit</mat-icon></button>
        <button mat-button><mat-icon>delete_forever</mat-icon></button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</mat-card>

My problem: how can I separate the components so that different levels can be seen as in the photo?

Answer 1

It is possible to create a box-shadow effect using pure CSS. So all content should be placed inside that div:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.foo-margin {
  margin: 15px;
}
.shadow {
  width: 100%;
  height: 100%;

  background-color: lightgreen;
  box-shadow: 0px 0px 3px 3px lightgrey;
}

<div class="foo-margin">
<p>Documentos</p>
<div class="shadow ">All your HTML elements should be placed here</div>
</div>

UPDATE:

It is possible to add a class which uses absolute positioning for your button:

<mat-grid-list cols="4" rowHeight="2:1">
  <mat-grid-tile colspan="4">
    <button class="button-right-inside-tile">Foo Button</button>    
  </mat-grid-tile>  
</mat-grid-list>

and class:

.button-right-inside-tile {
  position: absolute;
  right: 5px;
}

A complete stackblitz example can be seen here.