Fix image cropper z-index with focal point behind sticky bar

src/Umbraco.Web.UI.Client/src/less/components/overlays.less

@@ -2,7 +2,7 @@
     position: fixed;
     overflow: hidden;
     background: @white;
-    z-index: 7500;
+    z-index: @zindexUmbOverlay;
     animation: fadeIn 0.2s;
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }

src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-overlay-backdrop.less

@@ -3,8 +3,8 @@
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.50);
-   z-index: 2000;
+   z-index: @zindexOverlayBackdrop;
    top: 0;
    left: 0;
    animation: fadeIn 0.2s;
-}
+}

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -304,7 +304,7 @@ ul.color-picker li a  {
   top: 0;
   left: 0;
   cursor: move;
-  z-index: 6001;
+  z-index: @zindexCropperOverlay;
   position: absolute;
 }
 
@@ -331,7 +331,7 @@ ul.color-picker li a  {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 5999;
+  z-index: @zindexCropperOverlay - 1;
   -moz-opacity: .75;
   opacity: .75;
   filter: alpha(opacity=7);

src/Umbraco.Web.UI.Client/src/less/variables.less

@@ -230,6 +230,12 @@
 @zindexModalBackdrop:     1040;
 @zindexModal:             1050;
 
+@zindexUmbOverlay:        7500;
+@zindexOverlayBackdrop:   2000;
+
+// Sticky bar has a z-index of "500", which is set from javascript in directive
+// so set z-index of cropper should be lower to be behind sticky bar.
+@zindexCropperOverlay:    499;
 
 // Sprite icons path
 // -------------------------