ng-pick-datetimer Calendar Shows Behind Dialog box

Question

I have used ng prime dialog box and try to add ng-pick date picker on it but when click on date picker its hide behind of dialog box.plz help me my code is

<p-dialog   [contentStyle]="{'max-height':'190px' ,'max-width':'500px','width':'100%','height':'auto'}" header="Filter Columns" styleClass="quick-view-grid-row filterbox "   [(visible)]="displayFilter"
  appendTo="body" showEffect="fade" [modal]="true">
<div *ngIf="filterRow.datatype==='DateRange'">
        <!--<p-calendar [defaultDate]="currentdate"   timezone="utc"  styleClass="calender rightPadding" autofocus required="true" name="date" appendTo="body" [style]="{ 'width':'auto','z-index': '1089'}" [(ngModel)]="filterRow.values" [maxDate]="currentdate" [monthNavigator]="true" selectionMode="range" [placeholder]=filterRow.values [yearNavigator]="true" yearRange="2000:2030" showButtonBar="true" [showIcon]="true"></p-calendar>
      <span>{{currentdate}}</span> -->
      <input [(ngModel)]="filterRow.values" [owlDateTimeTrigger]="dt5" [owlDateTime]="dt5">
          <owl-date-time  #dt5></owl-date-time>

     </div>
</p-dialog>

Answer 1

Solved

I have added this css on main style.scss

.cdk-overlay-container {
    position: fixed;
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    z-index: 9999999 !important;
}
.cdk-global-overlay-wrapper, .cdk-overlay-container {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    z-index: 9999999 !important;
}

Answer 2

This is more than enough:

.cdk-global-overlay-wrapper, .cdk-overlay-container {
  z-index: 99999 !important;
}

Cheers.