diff --git a/src/components/blockui/BlockUI.vue b/src/components/blockui/BlockUI.vue
index ce27f5096..04a20e0aa 100755
--- a/src/components/blockui/BlockUI.vue
+++ b/src/components/blockui/BlockUI.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import {DomHandler,ZIndexUtils} from 'primevue/utils';
 
 export default {
     emits: ['block', 'unblock'],
@@ -63,7 +63,7 @@ export default {
             }
 
             if (this.autoZIndex) {
-                this.mask.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+                ZIndexUtils.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal);
             }
 
             this.$emit('block');
@@ -75,6 +75,7 @@ export default {
             });
         },
         removeMask() {
+            ZIndexUtils.clear(this.mask);
              if (this.fullScreen) {
                 document.body.removeChild(this.mask);
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index e4fe6240d..cfa21facc 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -8,7 +8,7 @@
             @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
         <button v-if="showMenuButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
         <Teleport to="body">
-            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
+            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick">
                     <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                     <template v-if="display === 'row'">
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import {DomHandler,ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {DomHandler,ConnectedOverlayScrollHandler,ZIndexUtils} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import {FilterOperator} from 'primevue/api';
 import Dropdown from 'primevue/dropdown';
@@ -144,6 +144,7 @@ export default {
     selfClick: false,
     beforeUnmount() {
         if (this.overlay) {
+            ZIndexUtils.clear(el);
             this.onOverlayHide();
         }
     },
@@ -341,12 +342,12 @@ export default {
         onContentClick() {
             this.selfClick = true;
         },
-        onOverlayEnter() {
+        onOverlayEnter(el) {
             if (this.filterMenuStyle) {
                 DomHandler.applyStyle(this.overlay, this.filterMenuStyle);
             }
             document.body.appendChild(this.overlay);
-            this.overlay.style.zIndex = String(DomHandler.generateZIndex());
+            ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             DomHandler.absolutePosition(this.overlay, this.$refs.icon);
             this.bindOutsideClickListener();
             this.bindScrollListener();
@@ -361,6 +362,9 @@ export default {
         onOverlayLeave() {
             this.onOverlayHide();
         },
+        onOverlayAfterLeave(el) {
+            ZIndexUtils.clear(el);
+        },
         onOverlayHide() {
             this.unbindOutsideClickListener();
             this.unbindResizeListener();