title: Angular Material: Popup Windows : Allow Windows to Go Between Front and Back
body: <p>We have 1) Material Dialog Component Opening up 2) Another Material Dialog Component, when user press &quot;Open Adv. Search&quot; Button.</p>
  <p>The first Dialog component is in fixed position.
  The second Dialog component is Movable, however cannot go behind first original one yet.</p>
  <p>How to make it so, users can interchange the back or front positions of both windows, like typical Windows 10 desktop app, depending on what is clicked/drag/drop last?</p>
  <p><strong>Second Component:</strong></p>
  <pre><code>public openAdvancedPropertySearchDialog(): void {
      const advancedApnSearchDialogRef = this.advancedApnSearchDialog.open(DocumentPropertyGridComponent, {
        width: '800px',
        height: '450px',
        disableClose: true,
        autoFocus: false,
        data: &quot;test&quot;
        hasBackdrop: false
      });
      advancedApnSearchDialogRef.afterClosed().subscribe(result =&gt; {});
    }
  </code></pre>
  <p><strong>HTML Code for Second Component:</strong> which is Movable:
  First Component Dialog should be in fixed position ideally</p>
  <pre><code>&lt;div mat-dialog-title cdkDrag cdkDragRootElement=&quot;.cdk-overlay-pane&quot; cdkDragHandle&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;button class=&quot;dialog-button close-button&quot; mat-button (click)=&quot;onCancel()&quot;&gt;X&lt;/button&gt;
    &lt;/div&gt;
    &lt;app-document-property-grid&gt;&lt;/app-document-property-grid&gt;  
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/0LHH9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0LHH9.png" alt="enter image description here" /></a></p>
  <p>*If its only possible both components be movable with cdkDrag, rather than first Modal window being fixed, that can be accepted as answer .</p>
  <p><strong>Resource:</strong></p>
  <p><a href="https://stackoverflow.com/questions/47510888/how-can-i-make-a-matdialog-draggable-angular-material">How can i make a MatDialog draggable / Angular Material</a></p>