diff --git a/packages/overlay/src/vaadin-overlay-position-mixin.js b/packages/overlay/src/vaadin-overlay-position-mixin.js
index ac754d145e..b9c54524b3 100644
--- a/packages/overlay/src/vaadin-overlay-position-mixin.js
+++ b/packages/overlay/src/vaadin-overlay-position-mixin.js
@@ -232,6 +232,11 @@ export const PositionMixin = (superClass) =>
 
       const targetRect = this.positionTarget.getBoundingClientRect();
 
+      if (targetRect.width === 0 && targetRect.height === 0 && this.opened) {
+        this.opened = false;
+        return;
+      }
+
       // Detect the desired alignment and update the layout accordingly
       const shouldAlignStartVertically = this.__shouldAlignStartVertically(targetRect);
       this.style.justifyContent = shouldAlignStartVertically ? 'flex-start' : 'flex-end';
diff --git a/packages/overlay/test/position-mixin.common.js b/packages/overlay/test/position-mixin.common.js
index 5bfd9876df..bfd47eafef 100644
--- a/packages/overlay/test/position-mixin.common.js
+++ b/packages/overlay/test/position-mixin.common.js
@@ -93,6 +93,18 @@ describe('position mixin', () => {
     expect(overlay.$.overlay.scrollTop).to.equal(100);
   });
 
+  it('should close overlay if element is hidden', async () => {
+    target.style.display = 'none';
+    await nextRender();
+    expect(overlay.opened).to.be.false;
+  });
+
+  it('should close overlay if parent element is hidden', async () => {
+    target.parentElement.style.display = 'none';
+    await nextRender();
+    expect(overlay.opened).to.be.false;
+  });
+
   describe('vertical align top', () => {
     beforeEach(() => {
       overlay.verticalAlign = TOP;