diff --git a/components/lib/overlaypanel/BaseOverlayPanel.vue b/components/lib/overlaypanel/BaseOverlayPanel.vue
index 28fb459aa..8b49e6e04 100644
--- a/components/lib/overlaypanel/BaseOverlayPanel.vue
+++ b/components/lib/overlaypanel/BaseOverlayPanel.vue
@@ -4,10 +4,7 @@ import { useStyle } from 'primevue/usestyle';
 
 const styles = `
 .p-overlaypanel {
-    position: absolute;
     margin-top: 10px;
-    top: 0;
-    left: 0;
 }
 
 .p-overlaypanel-flipped {
@@ -87,7 +84,7 @@ const classes = {
     ],
     content: 'p-overlaypanel-content',
     closeButton: 'p-overlaypanel-close p-link',
-    closeIcon: ({ props }) => ['p-overlaypanel-close-icon ', props.closeIcon]
+    closeIcon: 'p-overlaypanel-close-icon'
 };
 
 const { load: loadStyle } = useStyle(styles, { id: 'primevue_overlaypanel_style', manual: true });
diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue
index 4ee6aece5..8410a89ae 100755
--- a/components/lib/overlaypanel/OverlayPanel.vue
+++ b/components/lib/overlaypanel/OverlayPanel.vue
@@ -7,7 +7,7 @@
                 </div>
                 <button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
                     <slot name="closeicon">
-                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="cx('closeIcon')" v-bind="ptm('closeIcon')"></component>
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
                     </slot>
                 </button>
             </div>
@@ -104,6 +104,7 @@ export default {
         },
         onEnter(el) {
             this.container.setAttribute(this.attributeSelector, '');
+            DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
             this.alignOverlay();
 
             if (this.dismissable) {