title: How to set z-index when clicked with dialog overlays (PrimeNG)?
body: <p>Currently I am using dialogs from PrimeNG like this:</p>
  
  <pre><code>&lt;button type="button" class="button button-3 button-3a" 
     (click)="openCloseFront()"&gt;&lt;iclass="fa fa-eye"&gt;&lt;/i&gt;View Image 
  &lt;/button&gt;
  &lt;button type="button" class="button button-3 button-3a" 
     (click)="openCloseBack()"&gt;&lt;iclass="fa fa-eye"&gt;&lt;/i&gt;View Image 
  &lt;/button&gt;
  &lt;p-dialog [(visible)]="frontOpened" header="ID Front Side" 
            [responsive]="true"
            [style]="{width: '350px', minWidth: '200px'}" 
            [minY]="70" [maximizable]="true" 
            [baseZIndex]="10000"&gt;
    /* code here with img*/
  &lt;/p-dialog&gt;
  &lt;p-dialog [(visible)]="backOpened" header="ID Back Side" 
            [responsive]="true"
            [style]="{width: '350px', minWidth: '200px'}" 
            [minY]="70" [maximizable]="true" 
            [baseZIndex]="10000"&gt;
    /* code here with img*/
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>And I use buttons to open them like below:</p>
  
  <pre><code>public openCloseFront() {
     this.frontOpened = !this.frontOpened;
  }
  
  public openCloseBack() {
     this.backOpened = !this.backOpened;
  }
  </code></pre>
  
  <p>Current behavior is that the last opened dialog is the one with the biggest <code>z-index</code>. The problem here is that I cannot find a way to show the dialog when I click on it. What I mean is that I want to set <code>z-index</code> to be the highest when I click in the dialog in order to get it in front of all. Any idea?</p>