diff --git a/packages/primevue/src/drawer/Drawer.vue b/packages/primevue/src/drawer/Drawer.vue
index d6da51643e..0e3b45d551 100755
--- a/packages/primevue/src/drawer/Drawer.vue
+++ b/packages/primevue/src/drawer/Drawer.vue
@@ -1,8 +1,8 @@
 <template>
     <Portal>
-        <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position, modal })" v-bind="ptm('mask')">
             <transition name="p-drawer" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
-                <div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" role="complementary" :aria-modal="modal" v-bind="ptmi('root')">
+                <div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" :style="sx('root')" role="complementary" :aria-modal="modal" v-bind="ptmi('root')">
                     <slot v-if="$slots.container" name="container" :closeCallback="hide"></slot>
                     <template v-else>
                         <div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">
diff --git a/packages/primevue/src/drawer/style/DrawerStyle.js b/packages/primevue/src/drawer/style/DrawerStyle.js
index 8683816d8e..5445d52d47 100644
--- a/packages/primevue/src/drawer/style/DrawerStyle.js
+++ b/packages/primevue/src/drawer/style/DrawerStyle.js
@@ -4,7 +4,6 @@ const theme = ({ dt }) => `
 .p-drawer {
     display: flex;
     flex-direction: column;
-    pointer-events: auto;
     transform: translate3d(0px, 0px, 0px);
     position: relative;
     transition: transform 0.3s;
@@ -120,7 +119,7 @@ const theme = ({ dt }) => `
 `;
 
 const inlineStyles = {
-    mask: ({ position }) => ({
+    mask: ({ position, modal }) => ({
         position: 'fixed',
         height: '100%',
         width: '100%',
@@ -128,8 +127,12 @@ const inlineStyles = {
         top: 0,
         display: 'flex',
         justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
-        alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
-    })
+        alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center',
+        pointerEvents: modal ? 'auto' : 'none'
+    }),
+    root: {
+        pointerEvents: 'auto'
+    }
 };
 
 const classes = {