diff --git a/src/app/components/api/overlayservice.ts b/src/app/components/api/overlayservice.ts
new file mode 100644
index 00000000000..e875cf387df
--- /dev/null
+++ b/src/app/components/api/overlayservice.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { Message } from './message';
+
+@Injectable({providedIn: 'root'})
+export class OverlayService {
+
+    private clickSource = new Subject<Message|Message[]>();
+
+    clickObservable = this.clickSource.asObservable();
+
+    add(event) {
+        if (event) {
+            this.clickSource.next(event);
+        }
+    }
+}
diff --git a/src/app/components/api/primengconfig.ts b/src/app/components/api/primengconfig.ts
index 1f39451f173..3c8afc6fb45 100644
--- a/src/app/components/api/primengconfig.ts
+++ b/src/app/components/api/primengconfig.ts
@@ -79,10 +79,17 @@ export class PrimeNGConfig {
         emptyFilterMessage: 'No results found'
     }
 
+    zIndex = {
+        modal: 1100,
+        overlay: 1000,
+        menu: 1000,
+        tooltip: 1100
+    }
+
     private translationSource = new Subject<any>();
-    
+
     translationObserver = this.translationSource.asObservable();
-    
+
     getTranslation(key: string) {
         return this.translation[key];
     }
@@ -91,4 +98,4 @@ export class PrimeNGConfig {
         this.translation = {...this.translation, ...value};
         this.translationSource.next(this.translation);
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
index de0e3411067..19de395b941 100755
--- a/src/app/components/autocomplete/autocomplete.ts
+++ b/src/app/components/autocomplete/autocomplete.ts
@@ -6,7 +6,7 @@ import {ButtonModule} from 'primeng/button';
 import {RippleModule} from 'primeng/ripple';
 import {SharedModule,PrimeTemplate, TranslationKeys, PrimeNGConfig} from 'primeng/api';
 import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
-import {ObjectUtils, UniqueComponentId} from 'primeng/utils';
+import {ObjectUtils, UniqueComponentId, ZIndexUtils} from 'primeng/utils';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {CdkVirtualScrollViewport, ScrollingModule} from '@angular/cdk/scrolling';
 
@@ -40,7 +40,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
             <i *ngIf="loading" class="p-autocomplete-loader pi pi-spinner pi-spin"></i><button #ddBtn type="button" pButton [icon]="dropdownIcon" class="p-autocomplete-dropdown" [disabled]="disabled" pRipple
                 (click)="handleDropdownClick($event)" *ngIf="dropdown" [attr.tabindex]="tabindex"></button>
             <div #panel *ngIf="overlayVisible" [ngClass]="['p-autocomplete-panel p-component']" [style.max-height]="virtualScroll ? 'auto' : scrollHeight" [ngStyle]="panelStyle" [class]="panelStyleClass"
-                [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)">
+                [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)">
                 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 <ul role="listbox" [attr.id]="listId" class="p-autocomplete-items" [ngClass]="{'p-autocomplete-virtualscroll': virtualScroll}">
                     <ng-container *ngIf="group">
@@ -243,7 +243,7 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
     footerTemplate: TemplateRef<any>;
 
     selectedItemTemplate: TemplateRef<any>;
-    
+
     groupTemplate: TemplateRef<any>;
 
     value: any;
@@ -331,7 +331,7 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
                     if (this.virtualScroll && this.viewPort) {
                         let range = this.viewPort.getRenderedRange();
                         this.updateVirtualScrollSelectedIndex();
-                        
+
                         if (range.start > this.virtualScrollSelectedIndex || range.end < this.virtualScrollSelectedIndex) {
                             this.viewPort.scrollToIndex(this.virtualScrollSelectedIndex);
                         }
@@ -538,9 +538,11 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
                 this.overlay = event.element;
                 this.itemsWrapper = this.virtualScroll ? DomHandler.findSingle(this.overlay, '.cdk-virtual-scroll-viewport') : this.overlay;
                 this.appendOverlay();
+
                 if (this.autoZIndex) {
-                    this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+                    ZIndexUtils.set('overlay', this.overlay, this.baseZIndex + this.config.zIndex.overlay);
                 }
+
                 this.alignOverlay();
                 this.bindDocumentClickListener();
                 this.bindDocumentResizeListener();
@@ -554,6 +556,16 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
         }
     }
 
+    onOverlayAnimationEnd(event: AnimationEvent) {
+        switch(event.toState) {
+            case 'void':
+                if (this.autoZIndex) {
+                    ZIndexUtils.clear(event.element);
+                }
+            break;
+        }
+    }
+
     appendOverlay() {
         if (this.appendTo) {
             if (this.appendTo === 'body')
@@ -965,6 +977,11 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
+        if (this.overlay) {
+            ZIndexUtils.clear(this.overlay);
+        }
+
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
diff --git a/src/app/components/blockui/blockui.ts b/src/app/components/blockui/blockui.ts
index c28173f3ccc..b465228f7af 100755
--- a/src/app/components/blockui/blockui.ts
+++ b/src/app/components/blockui/blockui.ts
@@ -1,7 +1,7 @@
 import {NgModule,Component,Input,AfterViewInit,OnDestroy,ElementRef,ViewChild,ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ContentChildren, QueryList, TemplateRef} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {DomHandler} from 'primeng/dom';
-import {PrimeTemplate} from 'primeng/api';
+import {PrimeNGConfig, PrimeTemplate} from 'primeng/api';
+import {ZIndexUtils} from 'primeng/utils';
 
 @Component({
     selector: 'p-blockUI',
@@ -18,30 +18,30 @@ import {PrimeTemplate} from 'primeng/api';
 export class BlockUI implements AfterViewInit,OnDestroy {
 
     @Input() target: any;
-    
+
     @Input() autoZIndex: boolean = true;
-    
+
     @Input() baseZIndex: number = 0;
-    
+
     @Input() styleClass: string;
-    
+
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
     @ViewChild('mask') mask: ElementRef;
-    
+
     _blocked: boolean;
 
     contentTemplate: TemplateRef<any>;
-        
-    constructor(public el: ElementRef, public cd: ChangeDetectorRef) {}
-    
+
+    constructor(public el: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
+
     @Input() get blocked(): boolean {
         return this._blocked;
     }
-    
+
     set blocked(val: boolean) {
         this._blocked = val;
-        
+
         if (this.mask && this.mask.nativeElement) {
             if (this._blocked)
                 this.block();
@@ -49,7 +49,7 @@ export class BlockUI implements AfterViewInit,OnDestroy {
                 this.unblock();
         }
     }
-    
+
     ngAfterViewInit() {
         if (this.target && !this.target.getBlockableElement) {
             throw 'Target of BlockUI must implement BlockableUI interface';
@@ -62,14 +62,14 @@ export class BlockUI implements AfterViewInit,OnDestroy {
                 case 'content':
                     this.contentTemplate = item.template;
                 break;
-                
+
                 default:
                     this.contentTemplate = item.template;
                 break;
             }
         });
     }
-        
+
     block() {
         if (this.target) {
             this.target.getBlockableElement().appendChild(this.mask.nativeElement);
@@ -78,16 +78,17 @@ export class BlockUI implements AfterViewInit,OnDestroy {
         else {
             document.body.appendChild(this.mask.nativeElement);
         }
-        
+
         if (this.autoZIndex) {
-            this.mask.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+            ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex + this.config.zIndex.modal);
         }
     }
-    
+
     unblock() {
+        ZIndexUtils.clear(this.mask.nativeElement);
         this.el.nativeElement.appendChild(this.mask.nativeElement);
     }
-    
+
     ngOnDestroy() {
         this.unblock();
     }
@@ -98,4 +99,4 @@ export class BlockUI implements AfterViewInit,OnDestroy {
     exports: [BlockUI],
     declarations: [BlockUI]
 })
-export class BlockUIModule { }
\ No newline at end of file
+export class BlockUIModule { }
diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
index e8bc59acd2d..aaf02a15a8b 100755
--- a/src/app/components/calendar/calendar.ts
+++ b/src/app/components/calendar/calendar.ts
@@ -8,6 +8,7 @@ import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
 import {SharedModule,PrimeTemplate,PrimeNGConfig,TranslationKeys} from 'primeng/api';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {Subscription} from 'rxjs';
+import {ZIndexUtils} from 'primeng/utils';
 
 export const CALENDAR_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -445,7 +446,7 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     set defaultDate(defaultDate: Date) {
         this._defaultDate = defaultDate;
-        
+
         if (this.initialized) {
             const date = defaultDate||new Date();
             this.currentMonth = date.getMonth();
@@ -1200,10 +1201,6 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
     }
 
     onInputClick() {
-        if (this.overlay && this.autoZIndex) {
-            this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
-        }
-
         if (this.showOnFocus && !this.overlayVisible) {
             this.showOverlay();
         }
@@ -2030,8 +2027,12 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
                     this.overlay = event.element;
                     this.appendOverlay();
                     if (this.autoZIndex) {
-                        this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+                        if (this.touchUI)
+                            ZIndexUtils.set('modal', this.overlay, this.baseZIndex || this.config.zIndex.modal);
+                        else
+                            ZIndexUtils.set('overlay', this.overlay, this.baseZIndex || this.config.zIndex.overlay);
                     }
+
                     this.alignOverlay();
                     this.onShow.emit(event);
                 }
@@ -2054,6 +2055,12 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
                     this.bindScrollListener();
                 }
             break;
+
+            case 'void':
+                if (this.autoZIndex) {
+                    ZIndexUtils.clear(event.element);
+                }
+            break
         }
     }
 
@@ -2590,6 +2597,10 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
             this.translationSubscription.unsubscribe();
         }
 
+        if (this.overlay && this.autoZIndex) {
+            ZIndexUtils.clear(this.overlay);
+        }
+
         this.clearTimePickerTimer();
         this.restoreOverlayAppend();
         this.onOverlayHide();
diff --git a/src/app/components/cascadeselect/cascadeselect.ts b/src/app/components/cascadeselect/cascadeselect.ts
index f01db49af00..73f1cd16f25 100755
--- a/src/app/components/cascadeselect/cascadeselect.ts
+++ b/src/app/components/cascadeselect/cascadeselect.ts
@@ -1,7 +1,7 @@
 import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, TemplateRef, ContentChildren, QueryList, ElementRef, Output, EventEmitter, ViewChild, forwardRef, ChangeDetectorRef, Renderer2, OnDestroy, OnInit, AfterContentInit} from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { SharedModule, PrimeTemplate } from 'primeng/api';
-import { ObjectUtils } from 'primeng/utils';
+import { SharedModule, PrimeTemplate, PrimeNGConfig } from 'primeng/api';
+import { ObjectUtils, ZIndexUtils } from 'primeng/utils';
 import { DomHandler } from 'primeng/dom';
 import { trigger,style,transition,animate,AnimationEvent} from '@angular/animations';
 import { ConnectedOverlayScrollHandler } from 'primeng/dom';
@@ -149,7 +149,7 @@ export class CascadeSelectSub implements OnInit {
 
     getItemClass(option) {
         return {
-            'p-cascadeselect-item': true, 
+            'p-cascadeselect-item': true,
             'p-cascadeselect-item-group': this.isOptionGroup(option),
             'p-cascadeselect-item-active p-highlight': this.isOptionActive(option)
         }
@@ -241,12 +241,12 @@ export class CascadeSelectSub implements OnInit {
             <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
                 <span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
             </div>
-            <div class="p-cascadeselect-panel p-component" *ngIf="overlayVisible" 
+            <div class="p-cascadeselect-panel p-component" *ngIf="overlayVisible"
                 [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
                 <div class="p-cascadeselect-items-wrapper">
-                    <p-cascadeSelectSub [options]="options" [selectionPath]="selectionPath" class="p-cascadeselect-items" 
+                    <p-cascadeSelectSub [options]="options" [selectionPath]="selectionPath" class="p-cascadeselect-items"
                         [optionLabel]="optionLabel" [optionValue]="optionValue" [level]="0" [optionTemplate]="optionTemplate"
-                        [optionGroupLabel]="optionGroupLabel" [optionGroupChildren]="optionGroupChildren" 
+                        [optionGroupLabel]="optionGroupLabel" [optionGroupChildren]="optionGroupChildren"
                         (onSelect)="onOptionSelect($event)" (onGroupSelect)="onOptionGroupSelect($event)" [dirty]="dirty" [root]="true">
                     </p-cascadeSelectSub>
                 </div>
@@ -290,7 +290,7 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
     @Input() optionGroupChildren: any[];
 
     @Input() placeholder: string;
-    
+
     @Input() value: string;
 
     @Input() dataKey: string;
@@ -298,7 +298,7 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
     @Input() inputId: string;
 
     @Input() tabindex: string;
-    
+
     @Input() ariaLabelledBy: string;
 
     @Input() appendTo: any;
@@ -344,9 +344,9 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
     optionTemplate: TemplateRef<any>;
 
     outsideClickListener: any;
-    
+
     scrollHandler: any;
-    
+
     resizeListener: any;
 
     overlayEl: any;
@@ -355,7 +355,7 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
 
     onModelTouched: Function = () => {};
 
-    constructor(private el: ElementRef, private cd: ChangeDetectorRef) { }
+    constructor(private el: ElementRef, private cd: ChangeDetectorRef, private config: PrimeNGConfig) { }
 
     ngOnInit() {
         this.updateSelectionPath();
@@ -415,7 +415,7 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
             }
         }
 
-        this.selectionPath = path;   
+        this.selectionPath = path;
         this.updateFilledState();
     }
 
@@ -437,7 +437,7 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
         else if ((ObjectUtils.equals(this.value, this.getOptionValue(option), this.dataKey))) {
             return [option];
         }
-        
+
         return null;
     }
 
@@ -495,7 +495,7 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
     }
 
     onOverlayEnter() {
-        this.overlayEl.style.zIndex = String(DomHandler.generateZIndex());
+        ZIndexUtils.set('overlay', this.overlayEl, this.config.zIndex.overlay);
         this.appendContainer();
         this.alignOverlay();
         this.bindOutsideClickListener();
@@ -509,6 +509,7 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
         this.unbindScrollListener();
         this.unbindResizeListener();
         this.onHide.emit();
+        ZIndexUtils.clear(this.overlayEl);
         this.overlayEl = null;
         this.dirty = false;
     }
diff --git a/src/app/components/colorpicker/colorpicker.ts b/src/app/components/colorpicker/colorpicker.ts
index cd0706d4a8f..97384b942c5 100755
--- a/src/app/components/colorpicker/colorpicker.ts
+++ b/src/app/components/colorpicker/colorpicker.ts
@@ -3,6 +3,8 @@ import { trigger, state, style, transition, animate, AnimationEvent } from '@ang
 import { CommonModule } from '@angular/common';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+import { PrimeNGConfig } from 'primeng/api';
+import { ZIndexUtils } from 'primeng/utils';
 
 export const COLORPICKER_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -18,7 +20,7 @@ export const COLORPICKER_VALUE_ACCESSOR: any = {
                 (focus)="onInputFocus()" (click)="onInputClick()" (keydown)="onInputKeydown($event)" [attr.id]="inputId" [attr.tabindex]="tabindex" [disabled]="disabled"
                 [style.backgroundColor]="inputBgColor">
             <div *ngIf="inline || overlayVisible" [ngClass]="{'p-colorpicker-panel': true, 'p-colorpicker-overlay-panel':!inline, 'p-disabled': disabled}" (click)="onPanelClick()"
-                [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="inline === true" 
+                [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="inline === true"
                     (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)">
                 <div class="p-colorpicker-content">
                     <div #colorSelector class="p-colorpicker-color-selector" (touchstart)="onColorTouchStart($event)" (touchmove)="onMove($event)" (touchend)="onDragEnd()" (mousedown)="onColorMousedown($event)">
@@ -81,7 +83,6 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy {
 
     @Output() onHide: EventEmitter<any> = new EventEmitter();
 
-
     @ViewChild('container') containerViewChild: ElementRef;
 
     @ViewChild('input') inputViewChild: ElementRef;
@@ -128,7 +129,7 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy {
 
     hueHandleViewChild: ElementRef;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef) {}
+    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
 
     @ViewChild('colorSelector') set colorSelector(element: ElementRef) {
         this.colorSelectorViewChild = element;
@@ -323,9 +324,11 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy {
                 if (!this.inline) {
                     this.overlay = event.element;
                     this.appendOverlay();
+
                     if (this.autoZIndex) {
-                        this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+                        ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
                     }
+
                     this.alignOverlay();
                     this.bindDocumentClickListener();
                     this.bindDocumentResizeListener();
@@ -351,6 +354,10 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy {
             break;
 
             case 'void':
+                if (this.autoZIndex) {
+                    ZIndexUtils.clear(event.element);
+                }
+
                 this.onHide.emit({})
             break;
         }
@@ -660,6 +667,10 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy {
             this.scrollHandler = null;
         }
 
+        if (this.overlay && this.autoZIndex) {
+            ZIndexUtils.clear(this.overlay);
+        }
+
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
diff --git a/src/app/components/confirmpopup/confirmpopup.ts b/src/app/components/confirmpopup/confirmpopup.ts
index 428f7309a9a..4ad616cb29b 100755
--- a/src/app/components/confirmpopup/confirmpopup.ts
+++ b/src/app/components/confirmpopup/confirmpopup.ts
@@ -3,6 +3,7 @@ import {CommonModule} from '@angular/common';
 import {Confirmation, ConfirmationService, PrimeNGConfig, TranslationKeys} from 'primeng/api';
 import {Subscription} from 'rxjs';
 import {ButtonModule} from 'primeng/button';
+import {ZIndexUtils} from 'primeng/utils';
 import {trigger,state,style,transition,animate,AnimationEvent} from '@angular/animations';
 import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
 
@@ -123,7 +124,7 @@ export class ConfirmPopup implements OnDestroy {
 
     align() {
         if (this.autoZIndex) {
-            this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+            ZIndexUtils.set('overlay', this.container, this.config.zIndex.overlay);
         }
 
         DomHandler.absolutePosition(this.container, this.confirmation.target);
@@ -245,6 +246,11 @@ export class ConfirmPopup implements OnDestroy {
     onContainerDestroy() {
         this.unbindListeners();
         this.unsubscribeConfirmationSubscriptions();
+
+        if (this.autoZIndex) {
+            ZIndexUtils.clear(this.container);
+        }
+
         this.confirmation = null;
         this.container = null;
     }
diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts
index 4c74d195b26..2b48f35c189 100755
--- a/src/app/components/contextmenu/contextmenu.ts
+++ b/src/app/components/contextmenu/contextmenu.ts
@@ -1,8 +1,9 @@
 import { NgModule,Component,ElementRef,AfterViewInit,OnDestroy,Input,Output,Renderer2,Inject,forwardRef,ViewChild,NgZone,EventEmitter,ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DomHandler } from 'primeng/dom';
-import { MenuItem, ContextMenuService } from 'primeng/api';
+import { MenuItem, ContextMenuService, PrimeNGConfig } from 'primeng/api';
 import { RippleModule } from 'primeng/ripple';
+import { ZIndexUtils } from 'primeng/utils';
 import { RouterModule } from '@angular/router';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -15,7 +16,7 @@ import { takeUntil } from 'rxjs/operators';
                 <li *ngIf="child.separator" #menuitem class="p-menu-separator" [ngClass]="{'p-hidden': child.visible === false}" role="separator">
                 <li *ngIf="!child.separator" #menuitem [ngClass]="{'p-menuitem':true,'p-menuitem-active': isActive(getKey(index)),'p-hidden': child.visible === false}" [ngStyle]="child.style" [class]="child.styleClass"
                     (mouseenter)="onItemMouseEnter($event,child,getKey(index))" (mouseleave)="onItemMouseLeave($event,child)" role="none" [attr.data-ik]="getKey(index)">
-                    <a *ngIf="!child.routerLink" [attr.href]="child.url ? child.url : null" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id" 
+                    <a *ngIf="!child.routerLink" [attr.href]="child.url ? child.url : null" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id"
                         [attr.tabindex]="child.disabled ? null : '0'" (click)="onItemClick($event, child, menuitem, getKey(index))" [ngClass]="{'p-menuitem-link':true,'p-disabled':child.disabled}" pRipple
                         [attr.aria-haspopup]="item.items != null" [attr.aria-expanded]="isActive(getKey(index))">
                         <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon"></span>
@@ -212,7 +213,7 @@ export class ContextMenu implements AfterViewInit, OnDestroy {
 
     ngDestroy$ = new Subject();
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public contextMenuService: ContextMenuService) { }
+    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public contextMenuService: ContextMenuService, private config: PrimeNGConfig) { }
 
     ngAfterViewInit() {
         if (this.global) {
@@ -256,13 +257,18 @@ export class ContextMenu implements AfterViewInit, OnDestroy {
 
     hide() {
         this.containerViewChild.nativeElement.style.display = 'none';
+
+        if (this.autoZIndex) {
+            ZIndexUtils.clear(this.containerViewChild.nativeElement);
+        }
+
         this.unbindGlobalListeners();
         this.onHide.emit();
     }
 
     moveOnTop() {
-        if (this.autoZIndex) {
-            this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+        if (this.autoZIndex && this.containerViewChild && this.containerViewChild.nativeElement.style.display !== 'block') {
+            ZIndexUtils.set('menu', this.containerViewChild.nativeElement, this.baseZIndex + this.config.zIndex.menu);
         }
     }
 
@@ -408,7 +414,7 @@ export class ContextMenu implements AfterViewInit, OnDestroy {
 
         this.zone.runOutsideAngular(() => {
             if (!this.windowResizeListener) {
-                this.windowResizeListener = this.onWindowResize.bind(this);
+            this.windowResizeListener = this.onWindowResize.bind(this);
                 window.addEventListener('resize', this.windowResizeListener);
             }
         });
@@ -588,6 +594,10 @@ export class ContextMenu implements AfterViewInit, OnDestroy {
             this.triggerEventListener();
         }
 
+        if (this.containerViewChild && this.autoZIndex) {
+            ZIndexUtils.clear(this.containerViewChild.nativeElement);
+        }
+
         if (this.appendTo) {
             this.el.nativeElement.appendChild(this.containerViewChild.nativeElement);
         }
diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
index 0a35a71bc68..9caa6262505 100755
--- a/src/app/components/dialog/dialog.ts
+++ b/src/app/components/dialog/dialog.ts
@@ -3,10 +3,10 @@ import {NgModule,Component,ElementRef,OnDestroy,Input,Output,EventEmitter,Render
 import {trigger,style,transition,animate, AnimationEvent, animation, useAnimation} from '@angular/animations';
 import {CommonModule} from '@angular/common';
 import {DomHandler} from 'primeng/dom';
-import {Header,Footer,SharedModule, PrimeTemplate} from 'primeng/api';
+import {Header,Footer,SharedModule, PrimeTemplate, PrimeNGConfig} from 'primeng/api';
 import {FocusTrapModule} from 'primeng/focustrap';
 import {RippleModule} from 'primeng/ripple';
-import {UniqueComponentId} from 'primeng/utils';
+import {UniqueComponentId, ZIndexUtils} from 'primeng/utils';
 
 const showAnimation = animation([
     style({ transform: '{{transform}}', opacity: 0 }),
@@ -250,7 +250,7 @@ export class Dialog implements AfterContentInit,OnInit,OnDestroy {
 
     styleElement: any;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public zone: NgZone, private cd: ChangeDetectorRef) { }
+    constructor(public el: ElementRef, public renderer: Renderer2, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig) { }
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -397,8 +397,8 @@ export class Dialog implements AfterContentInit,OnInit,OnDestroy {
 
     moveOnTop() {
         if (this.autoZIndex) {
-            this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
-            this.wrapper.style.zIndex = String(this.baseZIndex + (DomHandler.zindex - 1));
+            ZIndexUtils.set('modal', this.container, this.baseZIndex + this.config.zIndex.modal);
+            this.wrapper.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
         }
     }
 
@@ -417,7 +417,7 @@ export class Dialog implements AfterContentInit,OnInit,OnDestroy {
                     }
                 `
             }
-            
+
             this.styleElement.innerHTML = innerHTML;
         }
     }
@@ -655,9 +655,7 @@ export class Dialog implements AfterContentInit,OnInit,OnDestroy {
 
         this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
             if (event.which == 27) {
-                if (parseInt(this.container.style.zIndex) === (DomHandler.zindex + this.baseZIndex)) {
-                    this.close(event);
-                }
+                this.close(event);
             }
         });
     }
@@ -740,6 +738,10 @@ export class Dialog implements AfterContentInit,OnInit,OnDestroy {
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
 
+        if (this.container && this.autoZIndex) {
+            ZIndexUtils.clear(this.container);
+        }
+
         this.container = null;
         this.wrapper = null;
 
diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
index bf57463f0d8..b62d97e6c05 100755
--- a/src/app/components/dropdown/dropdown.ts
+++ b/src/app/components/dropdown/dropdown.ts
@@ -3,10 +3,10 @@ import {NgModule,Component,ElementRef,OnInit,AfterViewInit,AfterContentInit,Afte
         QueryList,ViewChild,TemplateRef,forwardRef,ChangeDetectorRef,NgZone,ViewRef,ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 import {trigger,style,transition,animate,AnimationEvent} from '@angular/animations';
 import {CommonModule} from '@angular/common';
-import {PrimeNGConfig, SelectItem, TranslationKeys} from 'primeng/api';
+import {OverlayService, PrimeNGConfig, SelectItem, TranslationKeys} from 'primeng/api';
 import {SharedModule,PrimeTemplate, FilterService} from 'primeng/api';
 import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
-import {ObjectUtils} from 'primeng/utils';
+import {ObjectUtils,ZIndexUtils} from 'primeng/utils';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {TooltipModule} from 'primeng/tooltip';
 import {RippleModule} from 'primeng/ripple';
@@ -77,7 +77,7 @@ export class DropdownItem {
             <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
                 <span class="p-dropdown-trigger-icon" [ngClass]="dropdownIcon"></span>
             </div>
-            <div *ngIf="overlayVisible" [ngClass]="'p-dropdown-panel p-component'" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" [ngStyle]="panelStyle" [class]="panelStyleClass">
+            <div *ngIf="overlayVisible" [ngClass]="'p-dropdown-panel p-component'" (click)="onOverlayClick($event)" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.start)="onOverlayAnimationEnd($event)"onOverlayAnimationEnd [ngStyle]="panelStyle" [class]="panelStyleClass">
                 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 <div class="p-dropdown-header" *ngIf="filter" >
                     <div class="p-dropdown-filter-container" (click)="$event.stopPropagation()">
@@ -370,7 +370,7 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
 
     preventModelTouched: boolean;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig) {}
+    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {}
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -607,6 +607,13 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
         this.cd.detectChanges();
     }
 
+    onOverlayClick(event) {
+        this.overlayService.add({
+            originalEvent: event,
+            target: this.el.nativeElement
+        })
+    }
+
     isInputClick(event): boolean {
         return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') ||
             event.target.isSameNode(this.accessibleViewChild.nativeElement) ||
@@ -653,7 +660,7 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
                 this.itemsWrapper = DomHandler.findSingle(this.overlay, itemsWrapperSelector);
                 this.appendOverlay();
                 if (this.autoZIndex) {
-                    this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+                    ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
                 }
                 this.alignOverlay();
                 this.bindDocumentClickListener();
@@ -687,6 +694,14 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
         }
     }
 
+    onOverlayAnimationEnd(event: AnimationEvent) {
+        switch (event.toState) {
+            case 'void':
+                ZIndexUtils.clear(event.element);
+            break;
+        }
+    }
+
     scrollToSelectedVirtualScrollElement() {
         if (!this.virtualAutoScrolled) {
             if (this.viewPortOffsetTop) {
@@ -845,7 +860,7 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
                 else {
                     if (this.group) {
                         let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
-                        
+
                         if (selectedItemIndex !== -1) {
                             let nextItemIndex = selectedItemIndex.itemIndex + 1;
                             if (nextItemIndex < (this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex]).length)) {
@@ -1214,6 +1229,11 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
             this.scrollHandler = null;
         }
 
+        if (this.overlay) {
+            ZIndexUtils.clear(this.overlay);
+            this.overlay = null;
+        }
+
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
diff --git a/src/app/components/galleria/galleria.ts b/src/app/components/galleria/galleria.ts
index f1aeff90717..aed23fb0b61 100755
--- a/src/app/components/galleria/galleria.ts
+++ b/src/app/components/galleria/galleria.ts
@@ -1,15 +1,15 @@
 import {NgModule,Component,ElementRef,OnDestroy,Input,Output,EventEmitter,ChangeDetectionStrategy, ViewChild, ContentChildren, QueryList, TemplateRef, OnInit, OnChanges, AfterContentChecked, SimpleChanges, ViewEncapsulation, ChangeDetectorRef, AfterViewInit} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import { SharedModule, PrimeTemplate } from 'primeng/api';
-import { UniqueComponentId } from 'primeng/utils';
+import { SharedModule, PrimeTemplate, PrimeNGConfig } from 'primeng/api';
+import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 import { DomHandler } from 'primeng/dom';
-import { RippleModule } from 'primeng/ripple';  
+import { RippleModule } from 'primeng/ripple';
 
 @Component({
     selector: 'p-galleria',
     template: `
         <div *ngIf="fullScreen;else windowed">
-            <div *ngIf="visible" #mask [ngClass]="{'p-galleria-mask p-component-overlay':true, 'p-galleria-visible': this.visible}" [class]="maskClass" [ngStyle]="{'zIndex':zIndex}">
+            <div *ngIf="visible" #mask [ngClass]="{'p-galleria-mask p-component-overlay':true, 'p-galleria-visible': this.visible}" [class]="maskClass">
                 <p-galleriaContent [value]="value" [activeIndex]="activeIndex" (maskHide)="onMaskHide()" (activeItemChange)="onActiveItemChange($event)" [ngStyle]="containerStyle"></p-galleriaContent>
             </div>
         </div>
@@ -76,7 +76,7 @@ export class Galleria implements OnChanges, OnDestroy {
 
     @Input() containerStyle: any;
 
-    @ViewChild('mask', {static: false}) mask: ElementRef;
+    @ViewChild('mask') mask: ElementRef;
 
     @Input() get visible(): boolean {
         return this._visible;
@@ -89,9 +89,8 @@ export class Galleria implements OnChanges, OnDestroy {
     @Output() activeIndexChange: EventEmitter<any> = new EventEmitter();
 
     @Output() visibleChange: EventEmitter<any> = new EventEmitter();
-    
-	@ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
+	@ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
     _visible: boolean = false;
 
@@ -105,9 +104,7 @@ export class Galleria implements OnChanges, OnDestroy {
 
     captionFacet: any;
 
-    zIndex: string;
-
-    constructor(public element: ElementRef, public cd: ChangeDetectorRef) { }
+    constructor(public element: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) { }
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -132,15 +129,21 @@ export class Galleria implements OnChanges, OnDestroy {
         if (this.fullScreen && simpleChanges.visible) {
             if (simpleChanges.visible.currentValue) {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
+                this.cd.detectChanges();
 
-                this.zIndex = String(this.baseZIndex + ++DomHandler.zindex)
+                if (this.mask) {
+                    ZIndexUtils.set('modal', this.mask.nativeElement, this.baseZIndex || this.config.zIndex.modal);
+                }
             }
             else {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                if (this.mask) {
+                    ZIndexUtils.clear(this.mask.nativeElement);
+                }
             }
         }
     }
-    
+
     onMaskHide() {
         this.visible = false;
         this.visibleChange.emit(false);
@@ -157,13 +160,17 @@ export class Galleria implements OnChanges, OnDestroy {
         if (this.fullScreen) {
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
+
+        if (this.mask) {
+            ZIndexUtils.clear(this.mask);
+        }
     }
 }
 
 @Component({
     selector: 'p-galleriaContent',
     template: `
-        <div [attr.id]="id" *ngIf="value && value.length > 0" [ngClass]="{'p-galleria p-component': true, 'p-galleria-fullscreen': this.galleria.fullScreen, 
+        <div [attr.id]="id" *ngIf="value && value.length > 0" [ngClass]="{'p-galleria p-component': true, 'p-galleria-fullscreen': this.galleria.fullScreen,
             'p-galleria-indicator-onitem': this.galleria.showIndicatorsOnItem, 'p-galleria-item-nav-onhover': this.galleria.showItemNavigatorsOnHover && !this.galleria.fullScreen}"
             [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" [class]="galleriaClass()">
             <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>
@@ -173,7 +180,7 @@ export class Galleria implements OnChanges, OnDestroy {
                 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
             <div class="p-galleria-content">
-                <p-galleriaItem [value]="value" [activeIndex]="activeIndex" [circular]="galleria.circular" [templates]="galleria.templates" (onActiveIndexChange)="onActiveIndexChange($event)" 
+                <p-galleriaItem [value]="value" [activeIndex]="activeIndex" [circular]="galleria.circular" [templates]="galleria.templates" (onActiveIndexChange)="onActiveIndexChange($event)"
                     [showIndicators]="galleria.showIndicators" [changeItemOnIndicatorHover]="galleria.changeItemOnIndicatorHover" [indicatorFacet]="galleria.indicatorFacet"
                     [captionFacet]="galleria.captionFacet" [showItemNavigators]="galleria.showItemNavigators" [autoPlay]="galleria.autoPlay" [slideShowActive]="slideShowActive"
                     (startSlideShow)="startSlideShow()" (stopSlideShow)="stopSlideShow()"></p-galleriaItem>
@@ -386,7 +393,7 @@ export class GalleriaItem implements OnInit {
     @Output() startSlideShow: EventEmitter<any> = new EventEmitter();
 
     @Output() stopSlideShow: EventEmitter<any> = new EventEmitter();
-    
+
     @Output() onActiveIndexChange: EventEmitter<any> = new EventEmitter();
 
     @Input() get activeIndex(): number {
@@ -549,11 +556,11 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie
         this._oldactiveIndex = this._activeIndex;
         this._activeIndex = activeIndex;
     }
-    
+
     index: number;
 
     startPos = null;
-    
+
     thumbnailsStyle = null;
 
     sortedResponsiveOptions = null;
@@ -571,7 +578,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie
     _oldNumVisible: number = 0;
 
     _activeIndex: number = 0;
-    
+
     _oldactiveIndex: number = 0;
 
     constructor(private cd: ChangeDetectorRef) { }
@@ -799,7 +806,7 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie
             this.navBackward(e);
         }
     }
-    
+
     getTotalPageNumber() {
         return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
     }
@@ -896,4 +903,4 @@ export class GalleriaThumbnails implements OnInit, AfterContentChecked, AfterVie
     exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
     declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
 })
-export class GalleriaModule { }
\ No newline at end of file
+export class GalleriaModule { }
diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts
index 604a3323be6..46818ef2295 100755
--- a/src/app/components/menu/menu.ts
+++ b/src/app/components/menu/menu.ts
@@ -2,7 +2,8 @@ import {NgModule,Component,ElementRef,OnDestroy,Input,Output,EventEmitter,Render
 import {trigger,state,style,transition,animate,AnimationEvent} from '@angular/animations';
 import {CommonModule} from '@angular/common';
 import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
-import {MenuItem} from 'primeng/api';
+import {MenuItem, PrimeNGConfig} from 'primeng/api';
+import {ZIndexUtils} from 'primeng/utils';
 import {RouterModule} from '@angular/router';
 import {RippleModule} from 'primeng/ripple';
 
@@ -42,7 +43,7 @@ export class MenuItemContent {
     template: `
         <div #container [ngClass]="{'p-menu p-component': true, 'p-menu-overlay': popup}"
             [class]="styleClass" [ngStyle]="style" (click)="preventDocumentDefault=true" *ngIf="!popup || visible"
-            [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="popup !== true" (@overlayAnimation.start)="onOverlayAnimationStart($event)">
+            [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="popup !== true" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)">
             <ul class="p-menu-list p-reset">
                 <ng-template ngFor let-submenu [ngForOf]="model" *ngIf="hasSubMenu()">
                     <li class="p-menu-separator" *ngIf="submenu.separator" [ngClass]="{'p-hidden': submenu.visible === false}"></li>
@@ -119,7 +120,7 @@ export class Menu implements OnDestroy {
 
     relativeAlign: boolean;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, private cd: ChangeDetectorRef) {}
+    constructor(public el: ElementRef, public renderer: Renderer2, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
 
     toggle(event) {
         if (this.visible)
@@ -160,6 +161,16 @@ export class Menu implements OnDestroy {
         }
     }
 
+    onOverlayAnimationEnd(event: AnimationEvent) {
+        switch(event.toState) {
+            case 'void':
+                if (this.autoZIndex) {
+                    ZIndexUtils.clear(event.element);
+                }
+            break;
+        }
+    }
+
     alignOverlay() {
         if (this.relativeAlign)
             DomHandler.relativePosition(this.container, this.target);
@@ -184,7 +195,7 @@ export class Menu implements OnDestroy {
 
     moveOnTop() {
         if (this.autoZIndex) {
-            this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+            ZIndexUtils.set('menu', this.container, this.baseZIndex + this.config.zIndex.menu);
         }
     }
 
@@ -286,6 +297,10 @@ export class Menu implements OnDestroy {
                 this.scrollHandler = null;
             }
 
+            if (this.container && this.autoZIndex) {
+                ZIndexUtils.clear(this.container);
+            }
+
             this.restoreOverlayAppend();
             this.onOverlayHide();
         }
diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts
index 30acb3586b4..e5bb72de8f8 100755
--- a/src/app/components/menubar/menubar.ts
+++ b/src/app/components/menubar/menubar.ts
@@ -1,9 +1,10 @@
 import { NgModule, Component, ElementRef, Input, Renderer2, OnDestroy,ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, AfterContentInit, ContentChildren, QueryList, TemplateRef, ViewChild, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DomHandler } from 'primeng/dom';
-import { MenuItem, PrimeTemplate } from 'primeng/api';
+import { ZIndexUtils } from 'primeng/utils';
+import { MenuItem, PrimeNGConfig, PrimeTemplate } from 'primeng/api';
 import { RouterModule } from '@angular/router';
-import { RippleModule } from 'primeng/ripple';  
+import { RippleModule } from 'primeng/ripple';
 
 @Component({
     selector: 'p-menubarSub',
@@ -13,7 +14,7 @@ import { RippleModule } from 'primeng/ripple';
                 <li *ngIf="child.separator" class="p-menu-separator" [ngClass]="{'p-hidden': child.visible === false}" role="separator">
                 <li *ngIf="!child.separator" #listItem [ngClass]="{'p-menuitem':true, 'p-menuitem-active': child === activeItem, 'p-hidden': child.visible === false}" [ngStyle]="child.style" [class]="child.styleClass" role="none">
                     <a *ngIf="!child.routerLink" [attr.href]="child.url" [attr.data-automationid]="child.automationId" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id" role="menuitem"
-                        (click)="onItemClick($event, child)" (mouseenter)="onItemMouseEnter($event,child)" 
+                        (click)="onItemClick($event, child)" (mouseenter)="onItemMouseEnter($event,child)"
                          [ngClass]="{'p-menuitem-link':true,'p-disabled':child.disabled}" [attr.tabindex]="child.disabled ? null : '0'" [attr.aria-haspopup]="item.items != null" [attr.aria-expanded]="item === activeItem" pRipple>
                         <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon"></span>
                         <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlLabel">{{child.label}}</span>
@@ -22,7 +23,7 @@ import { RippleModule } from 'primeng/ripple';
                     </a>
                     <a *ngIf="child.routerLink" [routerLink]="child.routerLink" [attr.data-automationid]="child.automationId" [queryParams]="child.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}"
                         [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id" [attr.tabindex]="child.disabled ? null : '0'" role="menuitem"
-                        (click)="onItemClick($event, child)" (mouseenter)="onItemMouseEnter($event,child)" 
+                        (click)="onItemClick($event, child)" (mouseenter)="onItemMouseEnter($event,child)"
                         [ngClass]="{'p-menuitem-link':true,'p-disabled':child.disabled}"
                         [fragment]="child.fragment" [queryParamsHandling]="child.queryParamsHandling" [preserveFragment]="child.preserveFragment" [skipLocationChange]="child.skipLocationChange" [replaceUrl]="child.replaceUrl" [state]="child.state" pRipple>
                         <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon"></span>
@@ -51,7 +52,7 @@ export class MenubarSub implements OnDestroy {
 
     @Input() autoDisplay: boolean;
 
-    @Input() get parentActive():boolean 
+    @Input() get parentActive():boolean
     {
         return this._parentActive;
     }
@@ -92,7 +93,7 @@ export class MenubarSub implements OnDestroy {
                 item: item
             });
         }
-        
+
         if (item.items) {
             if (this.activeItem && item === this.activeItem) {
                 this.activeItem = null;
@@ -217,7 +218,7 @@ export class Menubar implements AfterContentInit, OnDestroy {
 
     outsideClickListener: any;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef) { }
+    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig) { }
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -234,9 +235,15 @@ export class Menubar implements AfterContentInit, OnDestroy {
     }
 
     toggle(event) {
-        this.mobileActive = !this.mobileActive;
-        let rootmenu = DomHandler.findSingle(this.el.nativeElement,".p-menubar-root-list")
-        rootmenu.style.zIndex = String(DomHandler.generateZIndex());
+        if (this.mobileActive) {
+            this.hide();
+            ZIndexUtils.clear(this.rootmenu.el.nativeElement);
+        }
+        else {
+            this.mobileActive = true;
+            ZIndexUtils.set('menu', this.rootmenu.el.nativeElement, this.config.zIndex.menu);
+        }
+
         this.bindOutsideClickListener();
         event.preventDefault();
     }
@@ -246,19 +253,24 @@ export class Menubar implements AfterContentInit, OnDestroy {
             this.outsideClickListener = (event) => {
                 if (this.mobileActive && this.rootmenu.el.nativeElement !== event.target && !this.rootmenu.el.nativeElement.contains(event.target)
                     && this.menubutton.nativeElement !== event.target && !this.menubutton.nativeElement.contains(event.target)) {
-                    this.mobileActive = false;
-                    this.cd.markForCheck();
+                    this.hide();
                 }
             };
             document.addEventListener('click', this.outsideClickListener);
         }
     }
 
-    onLeafClick() {
+    hide() {
         this.mobileActive = false;
+        this.cd.markForCheck();
+        ZIndexUtils.clear(this.rootmenu.el.nativeElement);
         this.unbindOutsideClickListener();
     }
 
+    onLeafClick() {
+        this.hide();
+    }
+
     unbindOutsideClickListener() {
         if (this.outsideClickListener) {
             document.removeEventListener('click', this.outsideClickListener);
diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
index ed503b81547..0589bca8c40 100755
--- a/src/app/components/multiselect/multiselect.ts
+++ b/src/app/components/multiselect/multiselect.ts
@@ -3,7 +3,7 @@ import { NgModule, Component, ElementRef, OnInit, AfterViewInit, AfterContentIni
 import { trigger,style,transition,animate,AnimationEvent} from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import { ObjectUtils } from 'primeng/utils';
+import { ObjectUtils, ZIndexUtils } from 'primeng/utils';
 import { SharedModule, PrimeTemplate, Footer, Header, FilterService, PrimeNGConfig, TranslationKeys } from 'primeng/api';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -19,7 +19,7 @@ export const MULTISELECT_VALUE_ACCESSOR: any = {
 @Component({
     selector: 'p-multiSelectItem',
     template: `
-        <li class="p-multiselect-item" (click)="onOptionClick($event)" (keydown)="onOptionKeydown($event)" [attr.aria-label]="label" 
+        <li class="p-multiselect-item" (click)="onOptionClick($event)" (keydown)="onOptionKeydown($event)" [attr.aria-label]="label"
             [attr.tabindex]="disabled ? null : '0'" [ngStyle]="{'height': itemSize + 'px'}"
             [ngClass]="{'p-highlight': selected, 'p-disabled': disabled}" pRipple>
             <div class="p-checkbox p-component">
@@ -98,8 +98,8 @@ export class MultiSelectItem {
             <div [ngClass]="{'p-multiselect-trigger':true}">
                 <span class="p-multiselect-trigger-icon" [ngClass]="dropdownIcon"></span>
             </div>
-            <div *ngIf="overlayVisible" [ngClass]="['p-multiselect-panel p-component']" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)"
-                [ngStyle]="panelStyle" [class]="panelStyleClass" (keydown)="onKeydown($event)">
+            <div *ngIf="overlayVisible" [ngClass]="['p-multiselect-panel p-component']" [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)"onOverlayAnimationEnd
+                (@overlayAnimation.done)="onOverlayAnimationEnd($event)" [ngStyle]="panelStyle" [class]="panelStyleClass" (keydown)="onKeydown($event)">
                 <div class="p-multiselect-header" *ngIf="showHeader">
                     <ng-content select="p-header"></ng-content>
                     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
@@ -583,8 +583,8 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
         if (this.disabled || this.toggleAllDisabled || this.readonly) {
             return;
         }
-        
-        let allChecked = this.allChecked;     
+
+        let allChecked = this.allChecked;
 
         if (allChecked)
             this.uncheckAll();
@@ -592,7 +592,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
             this.checkAll();
 
         this.onModelChange(this.value);
-        this.onChange.emit({ originalEvent: event, value: this.value });        
+        this.onChange.emit({ originalEvent: event, value: this.value });
         this.updateFilledState();
         this.updateLabel();
         event.preventDefault();
@@ -604,7 +604,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
 
         optionsToRender.forEach(opt => {
             if (!this.group) {
-                let optionDisabled = this.isOptionDisabled(opt); 
+                let optionDisabled = this.isOptionDisabled(opt);
                 if (!optionDisabled || (optionDisabled && this.isSelected(opt))) {
                     val.push(this.getOptionValue(opt));
                 }
@@ -614,7 +614,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
 
                 if (subOptions) {
                     subOptions.forEach(option => {
-                        let optionDisabled = this.isOptionDisabled(option); 
+                        let optionDisabled = this.isOptionDisabled(option);
                         if (!optionDisabled || (optionDisabled && this.isSelected(option))) {
                             val.push(this.getOptionValue(option));
                         }
@@ -632,7 +632,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
 
         optionsToRender.forEach(opt => {
             if (!this.group) {
-                let optionDisabled = this.isOptionDisabled(opt); 
+                let optionDisabled = this.isOptionDisabled(opt);
                 if (optionDisabled && this.isSelected(opt)) {
                     val.push(this.getOptionValue(opt));
                 }
@@ -640,7 +640,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
             else {
                 if (opt.items) {
                     opt.items.forEach(option => {
-                        let optionDisabled = this.isOptionDisabled(option); 
+                        let optionDisabled = this.isOptionDisabled(option);
                         if (optionDisabled && this.isSelected(option)) {
                             val.push(this.getOptionValue(option));
                         }
@@ -664,7 +664,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
                 this.overlay = event.element;
                 this.appendOverlay();
                 if (this.autoZIndex) {
-                    this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+                    ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
                 }
                 this.alignOverlay();
                 this.bindDocumentClickListener();
@@ -688,6 +688,14 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
         }
     }
 
+    onOverlayAnimationEnd(event: AnimationEvent) {
+        switch (event.toState) {
+            case 'void':
+                ZIndexUtils.clear(event.element);
+            break;
+        }
+    }
+
     appendOverlay() {
         if (this.appendTo) {
             if (this.appendTo === 'body')
@@ -940,16 +948,16 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
             let unselectedDisabledItemsLength = 0;
             let selectedEnabledItemsLength = 0;
             let visibleOptionsLength = this.group ? 0 : this.optionsToRender.length;
-            
+
             for (let option of optionsToRender) {
                 if (!this.group) {
                     let disabled = this.isOptionDisabled(option);
                     let selected = this.isSelected(option);
-    
+
                     if (disabled) {
                         if (selected)
                             selectedDisabledItemsLength++;
-                        else 
+                        else
                             unselectedDisabledItemsLength++;
                     }
                     else {
@@ -963,11 +971,11 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
                     for (let opt of this.getOptionGroupChildren(option)) {
                         let disabled = this.isOptionDisabled(opt);
                         let selected = this.isSelected(opt);
-        
+
                         if (disabled) {
                             if (selected)
                                 selectedDisabledItemsLength++;
-                            else 
+                            else
                                 unselectedDisabledItemsLength++;
                         }
                         else {
@@ -983,8 +991,8 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
                 }
             }
 
-            return (visibleOptionsLength === selectedDisabledItemsLength 
-                    || visibleOptionsLength === selectedEnabledItemsLength 
+            return (visibleOptionsLength === selectedDisabledItemsLength
+                    || visibleOptionsLength === selectedEnabledItemsLength
                     || selectedEnabledItemsLength && visibleOptionsLength === (selectedEnabledItemsLength + unselectedDisabledItemsLength + selectedDisabledItemsLength));
         }
     }
@@ -1007,7 +1015,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
     }
 
     hasFilter() {
-        return this._filterValue && this._filterValue.trim().length > 0; 
+        return this._filterValue && this._filterValue.trim().length > 0;
     }
 
     onFilterInputChange(event: KeyboardEvent) {
@@ -1033,7 +1041,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
                 this._filteredOptions = filteredGroups;
             }
             else {
-                this._filteredOptions = this.filterService.filter(this.options, searchFields, this._filterValue, this.filterMatchMode, this.filterLocale);        
+                this._filteredOptions = this.filterService.filter(this.options, searchFields, this._filterValue, this.filterMatchMode, this.filterLocale);
             }
         }
         else {
@@ -1118,6 +1126,10 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterContentInit,AfterV
             this.scrollHandler = null;
         }
 
+        if (this.overlay) {
+            ZIndexUtils.clear(this.overlay);
+        }
+
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
diff --git a/src/app/components/overlaypanel/overlaypanel.ts b/src/app/components/overlaypanel/overlaypanel.ts
index 0ace2a77ffa..c7a10106008 100755
--- a/src/app/components/overlaypanel/overlaypanel.ts
+++ b/src/app/components/overlaypanel/overlaypanel.ts
@@ -2,9 +2,10 @@ import {NgModule,Component,Input,Output,OnDestroy,EventEmitter,Renderer2,Element
         ContentChildren,TemplateRef,AfterContentInit,QueryList,ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
-import {SharedModule,PrimeTemplate} from 'primeng/api';
+import {SharedModule,PrimeTemplate, PrimeNGConfig} from 'primeng/api';
 import {RippleModule} from 'primeng/ripple';
 import {trigger,state,style,transition,animate,AnimationEvent} from '@angular/animations';
+import {ZIndexUtils} from 'primeng/utils';
 
 @Component({
     selector: 'p-overlayPanel',
@@ -52,7 +53,7 @@ export class OverlayPanel implements AfterContentInit, OnDestroy {
 
     @Input() styleClass: string;
 
-    @Input() appendTo: any;
+    @Input() appendTo: any = 'body';
 
     @Input() autoZIndex: boolean = true;
 
@@ -94,7 +95,7 @@ export class OverlayPanel implements AfterContentInit, OnDestroy {
 
     destroyCallback: Function;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, private zone: NgZone) {}
+    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, private zone: NgZone, public config: PrimeNGConfig) {}
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -186,8 +187,9 @@ export class OverlayPanel implements AfterContentInit, OnDestroy {
 
     align() {
         if (this.autoZIndex) {
-            this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+            ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay);
         }
+
         DomHandler.absolutePosition(this.container, this.target);
 
         const containerOffset = DomHandler.getOffset(this.container);
@@ -230,6 +232,10 @@ export class OverlayPanel implements AfterContentInit, OnDestroy {
             break;
 
             case 'close':
+                if (this.autoZIndex) {
+                    ZIndexUtils.clear(this.container);
+                }
+
                 this.onContainerDestroy();
                 this.onHide.emit({});
                 this.render = false;
@@ -303,6 +309,10 @@ export class OverlayPanel implements AfterContentInit, OnDestroy {
             this.scrollHandler = null;
         }
 
+        if (this.container && this.autoZIndex) {
+            ZIndexUtils.clear(this.container);
+        }
+
         this.target = null;
         this.destroyCallback = null;
         if (this.container) {
diff --git a/src/app/components/password/password.ts b/src/app/components/password/password.ts
index 4cf449c5e98..2e4f9c62680 100755
--- a/src/app/components/password/password.ts
+++ b/src/app/components/password/password.ts
@@ -4,6 +4,7 @@ import {animate, style, transition, trigger} from '@angular/animations';
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
 import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
 import {PrimeNGConfig, PrimeTemplate, TranslationKeys} from 'primeng/api';
+import {ZIndexUtils} from 'primeng/utils'
 import {InputTextModule} from 'primeng/inputtext';
 
 @Directive({
@@ -248,11 +249,11 @@ export const Password_VALUE_ACCESSOR: any = {
     selector: 'p-password',
     template: `
         <div [ngClass]="containerClass()" [ngStyle]="style" [class]="styleClass">
-            <input #input [attr.id]="inputId" pInputText [ngClass]="inputFieldClass()" [ngStyle]="inputStyle" [class]="inputStyleClass" [attr.type]="inputType()" [attr.placeholder]="placeholder" [value]="value" (input)="onInput($event)" (focus)="onFocus()" 
+            <input #input [attr.id]="inputId" pInputText [ngClass]="inputFieldClass()" [ngStyle]="inputStyle" [class]="inputStyleClass" [attr.type]="inputType()" [attr.placeholder]="placeholder" [value]="value" (input)="onInput($event)" (focus)="onFocus()"
                 (blur)="onBlur()" (keyup)="onKeyUp($event)" />
             <i *ngIf="toggleMask" [ngClass]="toggleIconClass()" (click)="onMaskToggle()"></i>
-            <div #overlay *ngIf="overlayVisible" [ngClass]="'p-password-panel p-component'" 
-                [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onAnimationStart($event)">
+            <div #overlay *ngIf="overlayVisible" [ngClass]="'p-password-panel p-component'"
+                [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onAnimationStart($event)" (@overlayAnimation.done)="onAnimationEnd($event)">
                 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 <ng-container *ngIf="contentTemplate; else content">
                     <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
@@ -288,7 +289,7 @@ export const Password_VALUE_ACCESSOR: any = {
     encapsulation: ViewEncapsulation.None
 })
 export class Password implements AfterContentInit,OnInit {
-    
+
     @Input() disabled: boolean;
 
     @Input() promptLabel: string;
@@ -334,15 +335,15 @@ export class Password implements AfterContentInit,OnInit {
     headerTemplate: TemplateRef<any>;
 
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
-    
+
     overlayVisible: boolean = false;
 
     meter: any;
-    
+
     infoText: string;
-    
+
     focused: boolean = false;
-    
+
     unmasked: boolean = false;
 
     mediumCheckRegExp: any;
@@ -380,7 +381,7 @@ export class Password implements AfterContentInit,OnInit {
                 case 'footer':
                     this.footerTemplate = item.template;
                 break;
-                
+
                 default:
                     this.contentTemplate = item.template;
                 break;
@@ -398,7 +399,7 @@ export class Password implements AfterContentInit,OnInit {
         switch(event.toState) {
             case 'visible':
                 this.overlay = event.element;
-                this.overlay.style.zIndex = String(DomHandler.generateZIndex());
+                ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
                 this.appendContainer();
                 this.alignOverlay();
                 this.bindScrollListener();
@@ -413,6 +414,14 @@ export class Password implements AfterContentInit,OnInit {
         }
     }
 
+    onAnimationEnd(event) {
+        switch(event.toState) {
+            case 'void':
+                ZIndexUtils.clear(event.element);
+            break;
+        }
+    }
+
     appendContainer() {
         if (this.appendTo) {
             if (this.appendTo === 'body')
@@ -462,7 +471,7 @@ export class Password implements AfterContentInit,OnInit {
             }
         }
     }
-    
+
     updateUI(value) {
         let label = null;
         let meter = null;
@@ -522,12 +531,12 @@ export class Password implements AfterContentInit,OnInit {
     writeValue(value: any) : void {
         if (value === undefined)
             this.value = null;
-        else 
+        else
             this.value = value;
 
         if (this.feedback)
             this.updateUI(this.value || "");
-        
+
         this.cd.markForCheck();
     }
 
@@ -593,7 +602,7 @@ export class Password implements AfterContentInit,OnInit {
     }
 
     inputFieldClass() {
-        return {'p-password-input' : true, 
+        return {'p-password-input' : true,
                 'p-disabled': this.disabled
         };
     }
@@ -644,8 +653,14 @@ export class Password implements AfterContentInit,OnInit {
     }
 
     ngOnDestroy() {
+        if (this.overlay) {
+            ZIndexUtils.clear(this.overlay);
+            this.overlay = null;
+        }
+
         this.restoreAppend();
         this.unbindResizeListener();
+
         if (this.scrollHandler) {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
diff --git a/src/app/components/scrolltop/scrolltop.ts b/src/app/components/scrolltop/scrolltop.ts
index 70112b58049..a1abc0e62cf 100755
--- a/src/app/components/scrolltop/scrolltop.ts
+++ b/src/app/components/scrolltop/scrolltop.ts
@@ -1,12 +1,14 @@
 import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, OnInit, OnDestroy, ElementRef, ChangeDetectorRef} from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { animate, state, style, transition, trigger, AnimationEvent } from '@angular/animations';
 import { DomHandler } from 'primeng/dom';
+import { ZIndexUtils } from 'primeng/utils'
+import { PrimeNGConfig } from 'primeng/api';
 
 @Component({
     selector: 'p-scrollTop',
     template: `
-        <button  *ngIf="visible" [@animation]="{value: 'open', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@animation.start)="onEnter()"
+        <button  *ngIf="visible" [@animation]="{value: 'open', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@animation.start)="onEnter($event)" (@animation.done)="onLeave($event)"
             [ngClass]="containerClass()" (click)="onClick()" [class]="styleClass" [ngStyle]="style" type="button">
             <span [class]="icon" [ngClass]="'p-scrolltop-icon'"></span>
         </button>
@@ -34,22 +36,24 @@ export class ScrollTop implements OnInit, OnDestroy {
     @Input() style: any;
 
     @Input() target: string = "window";
-    
+
     @Input() threshold: number = 400;
 
     @Input() icon: string = "pi pi-chevron-up";
 
     @Input() behavior: string = "smooth";
-    
+
     @Input() showTransitionOptions: string = '.15s';
 
     @Input() hideTransitionOptions: string = '.15s';
 
     scrollListener: any;
-    
+
     visible: boolean = false;
 
-    constructor(public el: ElementRef, private cd: ChangeDetectorRef) { }
+    overlay: any;
+
+    constructor(public el: ElementRef, private cd: ChangeDetectorRef, public config: PrimeNGConfig) { }
 
     ngOnInit() {
         if (this.target === 'window')
@@ -61,13 +65,30 @@ export class ScrollTop implements OnInit, OnDestroy {
     onClick() {
         let scrollElement = this.target === 'window' ? window : this.el.nativeElement.parentElement;
          scrollElement.scroll({
-            top: 0, 
+            top: 0,
             behavior: this.behavior
         });
     }
 
-    onEnter() {
-        this.el.nativeElement.children[0].style.zIndex = DomHandler.generateZIndex();
+    onEnter(event: AnimationEvent) {
+
+        switch(event.toState) {
+            case 'open':
+                this.overlay = event.element;
+                ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay);
+            break;
+            case 'void':
+                this.overlay = null;
+            break;
+        }
+    }
+
+    onLeave(event: AnimationEvent) {
+        switch(event.toState) {
+            case 'void':
+                ZIndexUtils.clear(event.element);
+            break;
+        }
     }
 
     checkVisibility(scrollY) {
@@ -84,7 +105,7 @@ export class ScrollTop implements OnInit, OnDestroy {
 
             this.checkVisibility(this.el.nativeElement.parentElement.scrollTop);
         };
-        
+
         this.el.nativeElement.parentElement.addEventListener('scroll', this.scrollListener);
     }
 
@@ -92,7 +113,7 @@ export class ScrollTop implements OnInit, OnDestroy {
         this.scrollListener = () => {
             this.checkVisibility(DomHandler.getWindowScrollTop());
         };
-        
+
         window.addEventListener('scroll', this.scrollListener);
     }
 
@@ -122,6 +143,11 @@ export class ScrollTop implements OnInit, OnDestroy {
             this.unbindDocumentScrollListener();
         else if (this.target === 'parent')
             this.unbindParentScrollListener();
+
+        if (this.overlay) {
+            ZIndexUtils.clear(this.overlay);
+            this.overlay = null;
+        }
     }
 }
 
diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts
index 01eca9ddfbc..85cbe879270 100755
--- a/src/app/components/sidebar/sidebar.ts
+++ b/src/app/components/sidebar/sidebar.ts
@@ -1,9 +1,10 @@
-import {NgModule,Component,AfterViewInit,AfterViewChecked,OnDestroy,Input,Output,EventEmitter,ElementRef,Renderer2,ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, QueryList, AfterContentInit, TemplateRef, ChangeDetectorRef} from '@angular/core';
+import {NgModule,Component,AfterViewInit,OnDestroy,Input,Output,EventEmitter,ElementRef,Renderer2,ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, QueryList, AfterContentInit, TemplateRef, ChangeDetectorRef} from '@angular/core';
 import {trigger, style, transition, animate, animation, useAnimation} from '@angular/animations';
 import {CommonModule} from '@angular/common';
 import {RippleModule} from 'primeng/ripple';
 import {DomHandler} from 'primeng/dom';
-import {PrimeTemplate} from 'primeng/api';
+import {PrimeNGConfig, PrimeTemplate} from 'primeng/api';
+import {ZIndexUtils} from 'primeng/utils';
 
 const showAnimation = animation([
     style({ transform: '{{transform}}', opacity: 0 }),
@@ -20,7 +21,7 @@ const hideAnimation = animation([
         <div #container [ngClass]="{'p-sidebar':true, 'p-sidebar-active': visible,
             'p-sidebar-left': (position === 'left' && !fullScreen), 'p-sidebar-right': (position === 'right' && !fullScreen),
             'p-sidebar-top': (position === 'top' && !fullScreen), 'p-sidebar-bottom': (position === 'bottom' && !fullScreen),
-            'p-sidebar-full': fullScreen}"  *ngIf="visible" [@panelState]="{value: 'visible', params: {transform: transformOptions, transition: transitionOptions}}" (@panelState.start)="onAnimationStart($event)" [ngStyle]="style" [class]="styleClass"  role="complementary" [attr.aria-modal]="modal">
+            'p-sidebar-full': fullScreen}"  *ngIf="visible" [@panelState]="{value: 'visible', params: {transform: transformOptions, transition: transitionOptions}}" (@panelState.start)="onAnimationStart($event)" (@panelState.done)="onAnimationEnd($event)" [ngStyle]="style" [class]="styleClass"  role="complementary" [attr.aria-modal]="modal">
             <div class="p-sidebar-header">
                 <button type="button" class="p-sidebar-close p-sidebar-icon p-link" *ngIf="showCloseIcon" (click)="close($event)" (keydown.enter)="close($event)" [attr.aria-label]="ariaCloseLabel" pRipple>
                     <span class="p-sidebar-close-icon pi pi-times"></span>
@@ -100,7 +101,7 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
 
     contentTemplate: TemplateRef<any>;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef) {}
+    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
 
     ngAfterViewInit() {
         this.initialized = true;
@@ -164,7 +165,7 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
 
     show() {
         if (this.autoZIndex) {
-            this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+            ZIndexUtils.set('modal', this.container, this.baseZIndex || this.config.zIndex.modal);
         }
 
         if (this.modal) {
@@ -239,6 +240,14 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
         }
     }
 
+    onAnimationEnd(event){
+        switch(event.toState) {
+            case 'void':
+                ZIndexUtils.clear(this.container);
+            break;
+        }
+    }
+
     appendContainer() {
         if (this.appendTo) {
             if (this.appendTo === 'body')
@@ -290,6 +299,11 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy {
             this.el.nativeElement.appendChild(this.container);
         }
 
+        if (this.container && this.autoZIndex) {
+            ZIndexUtils.clear(this.container);
+        }
+
+        this.container = null;
 		this.unbindGlobalListeners();
     }
 }
diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts
index 8df870360f4..ead9701e356 100755
--- a/src/app/components/tieredmenu/tieredmenu.ts
+++ b/src/app/components/tieredmenu/tieredmenu.ts
@@ -1,10 +1,11 @@
 import { NgModule, Component, ElementRef, Input, Renderer2, OnDestroy,ChangeDetectorRef, ChangeDetectionStrategy, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ConnectedOverlayScrollHandler, DomHandler } from 'primeng/dom';
-import { MenuItem } from 'primeng/api';
+import { MenuItem, PrimeNGConfig } from 'primeng/api';
 import { RouterModule } from '@angular/router';
-import { RippleModule } from 'primeng/ripple';  
+import { RippleModule } from 'primeng/ripple';
 import { animate, style, transition, trigger, AnimationEvent } from '@angular/animations';
+import { ZIndexUtils } from 'primeng/utils';
 
 @Component({
     selector: 'p-tieredMenuSub',
@@ -13,8 +14,8 @@ import { animate, style, transition, trigger, AnimationEvent } from '@angular/an
             <ng-template ngFor let-child [ngForOf]="(root ? item : item.items)">
                 <li *ngIf="child.separator" class="p-menu-separator" [ngClass]="{'p-hidden': child.visible === false}">
                 <li *ngIf="!child.separator" #listItem [ngClass]="{'p-menuitem':true, 'p-menuitem-active': child === activeItem, 'p-hidden': child.visible === false}" [ngStyle]="child.style" [class]="child.styleClass">
-                    <a *ngIf="!child.routerLink" (keydown)="onItemKeyDown($event, child)" [attr.href]="child.url" [attr.data-automationid]="child.automationId" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id" 
-                         (click)="onItemClick($event, child)" (mouseenter)="onItemMouseEnter($event,child)" 
+                    <a *ngIf="!child.routerLink" (keydown)="onItemKeyDown($event, child)" [attr.href]="child.url" [attr.data-automationid]="child.automationId" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id"
+                         (click)="onItemClick($event, child)" (mouseenter)="onItemMouseEnter($event,child)"
                          [ngClass]="{'p-menuitem-link':true,'p-disabled':child.disabled}"
                          [attr.tabindex]="child.disabled ? null : '0'" [attr.aria-haspopup]="item.items != null" [attr.aria-expanded]="item === activeItem" pRipple>
                         <span class="p-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon"></span>
@@ -54,7 +55,7 @@ export class TieredMenuSub implements OnDestroy {
 
     @Input() popup: boolean;
 
-    @Input() get parentActive():boolean 
+    @Input() get parentActive():boolean
     {
         return this._parentActive;
     }
@@ -252,8 +253,8 @@ export class TieredMenuSub implements OnDestroy {
     template: `
         <div [ngClass]="{'p-tieredmenu p-component':true, 'p-tieredmenu-overlay':popup}" [class]="styleClass" [ngStyle]="style"
             [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="popup !== true"
-            (@overlayAnimation.start)="onOverlayAnimationStart($event)" (click)="preventDocumentDefault=true" *ngIf="!popup || visible">
-            <p-tieredMenuSub [item]="model" root="root" [parentActive]="parentActive" [baseZIndex]="baseZIndex" [autoZIndex]="autoZIndex" (leafClick)="onLeafClick()" 
+            (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)" (click)="preventDocumentDefault=true" *ngIf="!popup || visible">
+            <p-tieredMenuSub [item]="model" root="root" [parentActive]="parentActive" [baseZIndex]="baseZIndex" [autoZIndex]="autoZIndex" (leafClick)="onLeafClick()"
                 [autoDisplay]="autoDisplay" [popup]="popup"></p-tieredMenuSub>
         </div>
     `,
@@ -310,7 +311,7 @@ export class TieredMenu implements OnDestroy {
 
     visible: boolean;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef) {}
+    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
 
     toggle(event) {
         if (this.visible)
@@ -349,6 +350,14 @@ export class TieredMenu implements OnDestroy {
         }
     }
 
+    onOverlayAnimationEnd(event: AnimationEvent) {
+        switch(event.toState) {
+            case 'void':
+                ZIndexUtils.clear(event.element);
+            break;
+        }
+    }
+
     appendOverlay() {
         if (this.appendTo) {
             if (this.appendTo === 'body')
@@ -366,7 +375,7 @@ export class TieredMenu implements OnDestroy {
 
     moveOnTop() {
         if (this.autoZIndex) {
-            this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+            ZIndexUtils.set('menu', this.container, this.baseZIndex + this.config.zIndex.menu);
         }
     }
 
@@ -454,6 +463,10 @@ export class TieredMenu implements OnDestroy {
                 this.scrollHandler = null;
             }
 
+            if (this.container && this.autoZIndex) {
+                ZIndexUtils.clear(this.container);
+            }
+
             this.restoreOverlayAppend();
             this.onOverlayHide();
         }
diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
index 86b1d4f9bf3..3b945fc733b 100755
--- a/src/app/components/toast/toast.ts
+++ b/src/app/components/toast/toast.ts
@@ -1,12 +1,13 @@
 import {NgModule,Component,Input,Output,OnInit,AfterViewInit,AfterContentInit,OnDestroy,ElementRef,ViewChild,EventEmitter,ContentChildren,QueryList,TemplateRef,ChangeDetectionStrategy, NgZone, ChangeDetectorRef, ViewEncapsulation} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {Message} from 'primeng/api';
+import {Message, PrimeNGConfig} from 'primeng/api';
 import {DomHandler} from 'primeng/dom';
 import {PrimeTemplate,SharedModule} from 'primeng/api';
 import {MessageService} from 'primeng/api';
 import {RippleModule} from 'primeng/ripple';
 import {Subscription} from 'rxjs';
 import {trigger,state,style,transition,animate,query,animateChild,AnimationEvent} from '@angular/animations';
+import { ZIndexUtils } from 'primeng/utils';
 
 @Component({
     selector: 'p-toastItem',
@@ -74,7 +75,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
     timeout: any;
 
     constructor(private zone: NgZone) {}
-    
+
     ngAfterViewInit() {
         this.initTimeout();
     }
@@ -98,7 +99,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
             this.timeout = null;
         }
     }
-    
+
     onMouseEnter() {
         this.clearTimeout();
     }
@@ -106,10 +107,10 @@ export class ToastItem implements AfterViewInit, OnDestroy {
     onMouseLeave() {
         this.initTimeout();
     }
- 
+
     onCloseIconClick(event) {
         this.clearTimeout();
-        
+
         this.onClose.emit({
             index: this.index,
             message: this.message
@@ -128,8 +129,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
     template: `
         <div #container [ngClass]="'p-toast p-component p-toast-' + position" [ngStyle]="style" [class]="styleClass">
             <p-toastItem *ngFor="let msg of messages; let i=index" [message]="msg" [index]="i" (onClose)="onMessageClose($event)"
-                    [template]="template" @toastAnimation (@toastAnimation.start)="onAnimationStart($event)" 
-                    [showTransformOptions]="showTransformOptions" [hideTransformOptions]="hideTransformOptions" 
+                    [template]="template" @toastAnimation [showTransformOptions]="showTransformOptions" [hideTransformOptions]="hideTransformOptions"
                     [showTransitionOptions]="showTransitionOptions" [hideTransitionOptions]="hideTransitionOptions"></p-toastItem>
         </div>
     `,
@@ -149,11 +149,11 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
     @Input() key: string;
 
     @Input() autoZIndex: boolean = true;
-    
+
     @Input() baseZIndex: number = 0;
 
     @Input() style: any;
-        
+
     @Input() styleClass: string;
 
     @Input() position: string = 'top-right';
@@ -161,7 +161,7 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
     @Input() preventOpenDuplicates: boolean = false;
 
     @Input() preventDuplicates: boolean = false;
-    
+
     @Input() showTransformOptions: string = 'translateY(100%)';
 
     @Input() hideTransformOptions: string = 'translateY(-100%)';
@@ -185,8 +185,8 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
     messagesArchieve: Message[];
 
     template: TemplateRef<any>;
-    
-    constructor(public messageService: MessageService, private cd: ChangeDetectorRef) {}
+
+    constructor(public messageService: MessageService, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
 
     ngOnInit() {
         this.messageSubscription = this.messageService.messageObserver.subscribe(messages => {
@@ -212,7 +212,13 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
             }
 
             this.cd.markForCheck();
-        });       
+        });
+    }
+
+    ngAfterViewInit() {
+        if (this.autoZIndex) {
+            ZIndexUtils.set('modal', this.containerViewChild.nativeElement, this.baseZIndex || this.config.zIndex.modal);
+        }
     }
 
     add(messages: Message[]): void {
@@ -273,17 +279,15 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
         this.cd.detectChanges();
     }
 
-    onAnimationStart(event: AnimationEvent) {
-        if (event.fromState === 'void' && this.autoZIndex) {
-            this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
-        }
-    }
-
-    ngOnDestroy() {        
+    ngOnDestroy() {
         if (this.messageSubscription) {
             this.messageSubscription.unsubscribe();
         }
-        
+
+        if (this.containerViewChild && this.autoZIndex) {
+            ZIndexUtils.clear(this.containerViewChild.nativeElement);
+        }
+
         if (this.clearSubscription) {
             this.clearSubscription.unsubscribe();
         }
diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts
index ce057b0a804..537dbb20eb2 100755
--- a/src/app/components/tooltip/tooltip.ts
+++ b/src/app/components/tooltip/tooltip.ts
@@ -1,6 +1,8 @@
 import { NgModule, Directive, ElementRef, AfterViewInit, OnDestroy, Input, NgZone } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
+import { ZIndexUtils } from 'primeng/utils'
+import { PrimeNGConfig } from 'primeng/api';
 
 @Directive({
     selector: '[pTooltip]'
@@ -65,7 +67,7 @@ export class Tooltip implements AfterViewInit, OnDestroy {
 
     resizeListener: any;
 
-    constructor(public el: ElementRef, public zone: NgZone) { }
+    constructor(public el: ElementRef, public zone: NgZone, public config: PrimeNGConfig) { }
 
     ngAfterViewInit() {
         this.zone.runOutsideAngular(() => {
@@ -201,7 +203,7 @@ export class Tooltip implements AfterViewInit, OnDestroy {
         DomHandler.fadeIn(this.container, 250);
 
         if (this.tooltipZIndex === 'auto')
-            this.container.style.zIndex = ++DomHandler.zindex;
+            ZIndexUtils.set('tooltip', this.container, this.config.zIndex.tooltip);
         else
             this.container.style.zIndex = this.tooltipZIndex;
 
@@ -210,6 +212,10 @@ export class Tooltip implements AfterViewInit, OnDestroy {
     }
 
     hide() {
+        if (this.tooltipZIndex === 'auto') {
+            ZIndexUtils.clear(this.container);
+        }
+
         this.remove();
     }
 
@@ -443,6 +449,11 @@ export class Tooltip implements AfterViewInit, OnDestroy {
 
     ngOnDestroy() {
         this.unbindEvents();
+
+        if (this.container) {
+            ZIndexUtils.clear(this.container);
+        }
+
         this.remove();
 
         if (this.scrollHandler) {
diff --git a/src/app/components/utils/public_api.ts b/src/app/components/utils/public_api.ts
index 54091a963f8..dd81af52cb0 100644
--- a/src/app/components/utils/public_api.ts
+++ b/src/app/components/utils/public_api.ts
@@ -1,2 +1,6 @@
-export * from './objectutils';
-export * from './uniquecomponentid'; 
\ No newline at end of file
+import {ObjectUtils} from './objectutils';
+import {UniqueComponentId} from './uniquecomponentid';
+import ZIndexUtils from './zindexutils';
+
+
+export {ZIndexUtils,UniqueComponentId,ObjectUtils};
diff --git a/src/app/components/utils/zindexutils.ts b/src/app/components/utils/zindexutils.ts
new file mode 100644
index 00000000000..dc6d24aa591
--- /dev/null
+++ b/src/app/components/utils/zindexutils.ts
@@ -0,0 +1,42 @@
+function ZIndexUtils() {
+    let zIndexes = [];
+
+    const generateZIndex = (key, baseZIndex) => {
+        let lastZIndex = zIndexes.length > 0 ? zIndexes[zIndexes.length - 1] : { key, value: baseZIndex };
+        let newZIndex = lastZIndex.value + (lastZIndex.key === key ? 0 : baseZIndex) + 1;
+
+        zIndexes.push({ key, value: newZIndex });
+
+        return newZIndex;
+    }
+
+    const revertZIndex = (zIndex) => {
+        zIndexes = zIndexes.filter(obj => obj.value !== zIndex);
+    }
+
+    const getCurrentZIndex = () => {
+        return zIndexes.length > 0 ? zIndexes[zIndexes.length - 1].value : 0;
+    }
+
+    const getZIndex = (el) => {
+        return el ? parseInt(el.style.zIndex, 10) || 0 : 0
+    }
+
+    return {
+        get: getZIndex,
+        set: (key, el, baseZIndex) => {
+            if (el) {
+                el.style.zIndex = String(generateZIndex(key, baseZIndex));
+            }
+        },
+        clear: (el) => {
+            if (el) {
+                revertZIndex(getZIndex(el));
+                el.style.zIndex = '';
+            }
+        },
+        getCurrent: () => getCurrentZIndex()
+    };
+}
+
+export default ZIndexUtils();