Adjust z-index of notifications (#11634)

* Store notification z-index in variable

* Only show unordered list if any notifications

* Move notificaion layers to same parent as overlays so layers can be controlled via z-index

Author: bjarnef

src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less

@@ -1,5 +1,5 @@
 .umb-notifications {
-    z-index: 999999;
+    z-index: @zindexNotification;
     position: absolute;
     bottom: @editorFooterHeight;
     left: 0;

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

@@ -362,6 +362,8 @@
 @zindexUmbOverlay:        7500;
 @zindexOverlayBackdrop:   2000;
 
+@zindexNotification:      8000;
+
 // these are used for the tour which should be on top of everything else
 @zindexTourBackdrop:      9999;
 @zindexTourModal:        10000;

src/Umbraco.Web.UI.Client/src/views/components/notifications/umb-notifications.html

@@ -1,5 +1,5 @@
 <div class="umb-notifications" id="umb-notifications-wrapper" ng-cloak>
-    <ul class="umb-notifications__notifications" aria-live="assertive" aria-relevant="additions">
+    <ul ng-if="notifications" class="umb-notifications__notifications" aria-live="assertive" aria-relevant="additions">
         <li ng-repeat="notification in notifications"
             class="alert alert-block alert-{{notification.type}} umb-notifications__notification animated -half-second fadeIn"
             ng-class="{'-no-border -extra-padding': notification.type === 'form'}">

src/Umbraco.Web.UI/umbraco/UmbracoBackOffice/Default.cshtml

@@ -79,8 +79,6 @@
 
             </div>
 
-            <umb-notifications></umb-notifications>
-
         </div>
 
         <umb-tour ng-if="tour.show"
@@ -94,6 +92,8 @@
 
     </div>
 
+    <umb-notifications></umb-notifications>
+
     <umb-backdrop ng-if="backdrop.show || infiniteMode"
                   backdrop-opacity="backdrop.opacity"
                   highlight-element="backdrop.element"