design-themes-responsive-css-addons-image_zoom-styles.less.diff

diff --git a/design/themes/responsive/css/addons/image_zoom/styles.less b/design/themes/responsive/css/addons/image_zoom/styles.less
index d1541f348a..b5136c37eb 100644
--- a/design/themes/responsive/css/addons/image_zoom/styles.less
+++ b/design/themes/responsive/css/addons/image_zoom/styles.less
@@ -5,7 +5,6 @@
 
     &__flyout {
         opacity: 0;
-        z-index: -9001;
 
         transition: opacity var(--image-zoom-animation-time);
 
@@ -13,7 +12,6 @@
 
         &--visible {
             opacity: 1;
-            z-index: 1100;
         }
 
         border: 1px solid @base;

js-addons-image_zoom-index.js.diff

diff --git a/js/addons/image_zoom/index.js b/js/addons/image_zoom/index.js
index 8d1aa0d214..d5818afd8a 100644
--- a/js/addons/image_zoom/index.js
+++ b/js/addons/image_zoom/index.js
@@ -2,8 +2,11 @@
     var FLYOUT_WIDTH = 450,
         FLYOUT_HEIGHT = 450,
         FLYOUT_OFFSET = 10,
+        VISIBLE_Z_INDEX = 1100,
+        HIDDEN_Z_INDEX = -9001,
         FLYOUT_CLASS = 'ty-image-zoom__flyout',
         FLYOUT_VISIBLE_CLASS = FLYOUT_CLASS + '--visible',
+        QUICK_VIEW_SELECTOR = '[aria-describedby="product_quick_view"]:visible',
         FLYOUT_DELAY_BEFORE_DISPLAY = 200,
         FLYOUT_DELAY_BEFORE_HIDE = 100,
         VIEW_BOX_SIZE = 100;
@@ -87,7 +90,10 @@
 
                 self.$flyout.css({
                     left: flyoutPosition.left,
-                    top: flyoutPosition.top
+                    top: flyoutPosition.top,
+                    zIndex: $(QUICK_VIEW_SELECTOR).length
+                        ? $(QUICK_VIEW_SELECTOR).css('zIndex') + 1
+                        : VISIBLE_Z_INDEX,
                 });
 
                 self.$flyout.addClass(FLYOUT_VISIBLE_CLASS);
@@ -334,10 +340,10 @@
          * @param {jQuery} $activeFlyout
          */
         hideAllFlyouts: function ($activeFlyout) {
-            $('.' + FLYOUT_CLASS).removeClass(FLYOUT_VISIBLE_CLASS);
+            $('.' + FLYOUT_CLASS).removeClass(FLYOUT_VISIBLE_CLASS).css({zIndex: HIDDEN_Z_INDEX});
             // fixes blinking in Chrome
             if ($activeFlyout) {
-                $activeFlyout.removeClass(FLYOUT_VISIBLE_CLASS);
+                $activeFlyout.removeClass(FLYOUT_VISIBLE_CLASS).css({zIndex: HIDDEN_Z_INDEX});
             }
             hasActiveFlyout = false;
             if (pointerPositionChecker) {