diff --git a/src/assets/style/app/_core.scss b/src/assets/style/app/_core.scss
index 21bdc6f50c..1953f27a0c 100644
--- a/src/assets/style/app/_core.scss
+++ b/src/assets/style/app/_core.scss
@@ -128,6 +128,7 @@ pre[class*="language-"] {
 .p-toast.p-toast-top-right,
 .p-toast.p-toast-top-left {
     top: 100px;
+    z-index: 999999 !important;
 }
 
 .action-button {
diff --git a/src/showcase/calendar/CalendarDemo.js b/src/showcase/calendar/CalendarDemo.js
index 55debdaf70..020ce1f54e 100644
--- a/src/showcase/calendar/CalendarDemo.js
+++ b/src/showcase/calendar/CalendarDemo.js
@@ -143,7 +143,7 @@ export class CalendarDemo extends Component {
                             </div>
                             <div className="p-field p-col-12 p-md-4">
                                 <label htmlFor="touchUI">TouchUI</label>
-                                <Calendar id="touchUI" value={this.state.date13} onChange={(e) => this.setState({ date13: e.value })} touchUI />
+                                <Calendar id="touchUI" value={this.state.date13} onChange={(e) => this.setState({ date13: e.value })} touchUI baseZIndex={1000} />
                             </div>
                             <div className="p-field p-col-12 p-md-4">
                                 <label htmlFor="mask">Mask</label>
diff --git a/src/showcase/calendar/CalendarDoc.js b/src/showcase/calendar/CalendarDoc.js
index d94a4f7933..7a4b7866ef 100644
--- a/src/showcase/calendar/CalendarDoc.js
+++ b/src/showcase/calendar/CalendarDoc.js
@@ -149,7 +149,7 @@ export class CalendarDemo extends Component {
                         </div>
                         <div className="p-field p-col-12 p-md-4">
                             <label htmlFor="touchUI">TouchUI</label>
-                            <Calendar id="touchUI" value={this.state.date13} onChange={(e) => this.setState({ date13: e.value })} touchUI />
+                            <Calendar id="touchUI" value={this.state.date13} onChange={(e) => this.setState({ date13: e.value })} touchUI baseZIndex={1000} />
                         </div>
                         <div className="p-field p-col-12 p-md-4">
                             <label htmlFor="mask">Mask</label>
@@ -296,7 +296,7 @@ const CalendarDemo = () => {
                     </div>
                     <div className="p-field p-col-12 p-md-4">
                         <label htmlFor="touchUI">TouchUI</label>
-                        <Calendar id="touchUI" value={date13} onChange={(e) => setDate13(e.value)} touchUI />
+                        <Calendar id="touchUI" value={date13} onChange={(e) => setDate13(e.value)} touchUI baseZIndex={1000} />
                     </div>
                     <div className="p-field p-col-12 p-md-4">
                         <label htmlFor="mask">Mask</label>
@@ -442,7 +442,7 @@ const CalendarDemo = () => {
                     </div>
                     <div className="p-field p-col-12 p-md-4">
                         <label htmlFor="touchUI">TouchUI</label>
-                        <Calendar id="touchUI" value={date13} onChange={(e) => setDate13(e.value)} touchUI />
+                        <Calendar id="touchUI" value={date13} onChange={(e) => setDate13(e.value)} touchUI baseZIndex={1000} />
                     </div>
                     <div className="p-field p-col-12 p-md-4">
                         <label htmlFor="mask">Mask</label>
diff --git a/src/showcase/confirmdialog/ConfirmDialogDemo.js b/src/showcase/confirmdialog/ConfirmDialogDemo.js
index dc7e185346..51f648e888 100644
--- a/src/showcase/confirmdialog/ConfirmDialogDemo.js
+++ b/src/showcase/confirmdialog/ConfirmDialogDemo.js
@@ -34,6 +34,7 @@ export class ConfirmDialogDemo extends Component {
             message: 'Are you sure you want to proceed?',
             header: 'Confirmation',
             icon: 'pi pi-exclamation-triangle',
+            baseZIndex: 1000,
             accept: this.accept,
             reject: this.reject
         });
@@ -45,6 +46,7 @@ export class ConfirmDialogDemo extends Component {
             header: 'Delete Confirmation',
             icon: 'pi pi-info-circle',
             acceptClassName: 'p-button-danger',
+            baseZIndex: 1000,
             accept: this.accept,
             reject: this.reject
         });
@@ -56,6 +58,7 @@ export class ConfirmDialogDemo extends Component {
             header: 'Delete Confirmation',
             icon: 'pi pi-info-circle',
             position,
+            baseZIndex: 1000,
             accept: this.accept,
             reject: this.reject
         });
@@ -99,7 +102,7 @@ export class ConfirmDialogDemo extends Component {
 
                         <h5>Using ConfirmDialog tag</h5>
                         <ConfirmDialog visible={this.state.visible} onHide={() => this.setState({ visible: false })} message="Are you sure you want to proceed?"
-                            header="Confirmation" icon="pi pi-exclamation-triangle" accept={this.accept} reject={this.reject} />
+                            header="Confirmation" icon="pi pi-exclamation-triangle" accept={this.accept} reject={this.reject} baseZIndex={1000}/>
                         <Button onClick={() => this.setState({ visible: true })} icon="pi pi-check" label="Confirm" />
                     </div>
                 </div>
diff --git a/src/showcase/confirmdialog/ConfirmDialogDoc.js b/src/showcase/confirmdialog/ConfirmDialogDoc.js
index 265eb0b3f1..cdac45f793 100644
--- a/src/showcase/confirmdialog/ConfirmDialogDoc.js
+++ b/src/showcase/confirmdialog/ConfirmDialogDoc.js
@@ -47,6 +47,7 @@ export class ConfirmDialogDemo extends Component {
             message: 'Are you sure you want to proceed?',
             header: 'Confirmation',
             icon: 'pi pi-exclamation-triangle',
+            baseZIndex: 1000,
             accept: this.accept,
             reject: this.reject
         });
@@ -58,6 +59,7 @@ export class ConfirmDialogDemo extends Component {
             header: 'Delete Confirmation',
             icon: 'pi pi-info-circle',
             acceptClassName: 'p-button-danger',
+            baseZIndex: 1000,
             accept: this.accept,
             reject: this.reject
         });
@@ -69,6 +71,7 @@ export class ConfirmDialogDemo extends Component {
             header: 'Delete Confirmation',
             icon: 'pi pi-info-circle',
             position,
+            baseZIndex: 1000,
             accept: this.accept,
             reject: this.reject
         });
@@ -104,7 +107,7 @@ export class ConfirmDialogDemo extends Component {
 
                     <h5>Using ConfirmDialog tag</h5>
                     <ConfirmDialog visible={this.state.visible} onHide={() => this.setState({ visible: false })} message="Are you sure you want to proceed?"
-                        header="Confirmation" icon="pi pi-exclamation-triangle" accept={this.accept} reject={this.reject} />
+                        header="Confirmation" icon="pi pi-exclamation-triangle" accept={this.accept} reject={this.reject} baseZIndex={1000}/>
                     <Button onClick={() => this.setState({ visible: true })} icon="pi pi-check" label="Confirm" />
                 </div>
             </div>
@@ -138,6 +141,7 @@ const ConfirmDialogDemo = () => {
             message: 'Are you sure you want to proceed?',
             header: 'Confirmation',
             icon: 'pi pi-exclamation-triangle',
+            baseZIndex: 1000,
             accept,
             reject
         });
@@ -149,6 +153,7 @@ const ConfirmDialogDemo = () => {
             header: 'Delete Confirmation',
             icon: 'pi pi-info-circle',
             acceptClassName: 'p-button-danger',
+            baseZIndex: 1000,
             accept,
             reject
         });
@@ -160,6 +165,7 @@ const ConfirmDialogDemo = () => {
             header: 'Delete Confirmation',
             icon: 'pi pi-info-circle',
             position,
+            baseZIndex: 1000,
             accept,
             reject
         });
@@ -194,7 +200,7 @@ const ConfirmDialogDemo = () => {
 
                 <h5>Using ConfirmDialog tag</h5>
                 <ConfirmDialog visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?"
-                    header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+                    header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} baseZIndex={1000} />
                 <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
             </div>
         </div>
@@ -227,6 +233,7 @@ const ConfirmDialogDemo = () => {
             message: 'Are you sure you want to proceed?',
             header: 'Confirmation',
             icon: 'pi pi-exclamation-triangle',
+            baseZIndex: 1000,
             accept,
             reject
         });
@@ -238,6 +245,7 @@ const ConfirmDialogDemo = () => {
             header: 'Delete Confirmation',
             icon: 'pi pi-info-circle',
             acceptClassName: 'p-button-danger',
+            baseZIndex: 1000,
             accept,
             reject
         });
@@ -249,6 +257,7 @@ const ConfirmDialogDemo = () => {
             header: 'Delete Confirmation',
             icon: 'pi pi-info-circle',
             position,
+            baseZIndex: 1000,
             accept,
             reject
         });
@@ -283,7 +292,7 @@ const ConfirmDialogDemo = () => {
 
                 <h5>Using ConfirmDialog tag</h5>
                 <ConfirmDialog visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?"
-                    header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+                    header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} baseZIndex={1000} />
                 <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
             </div>
         </div>