Issue #3177918 by mherchel: Holistically refactor use of Olivero's z-index...

Issue #3177918 by mherchel: Holistically refactor use of Olivero's z-index rules to play nice with Core

(cherry picked from commit bdf6131d)

core/themes/olivero/css/components/header-navigation.css

@@ -36,7 +36,7 @@
 
 .header-nav {
   position: fixed;
-  z-index: 5; /* appear above overlay */
+  z-index: 105; /* appear above overlay */
   top: 0;
   visibility: hidden;
   overflow: auto;

core/themes/olivero/css/components/header-navigation.pcss.css

@@ -7,7 +7,7 @@
 
 .header-nav {
   position: fixed;
-  z-index: 5; /* appear above overlay */
+  z-index: 105; /* appear above overlay */
   inset-block-start: 0;
   inset-inline-end: 0;
   visibility: hidden;

core/themes/olivero/css/components/header.css

@@ -27,7 +27,7 @@
 
 .header__left {
   position: relative;
-  z-index: 2;
+  z-index: 102;
   display: flex;
   align-items: flex-end;
   -ms-grid-row-align: stretch;
@@ -50,7 +50,7 @@
 @media (min-width: 75rem) {
     body:not(.is-always-mobile-nav) .site-header__fixable.js-fixed {
       position: fixed;
-      z-index: 2; /* Appear above body content that is position: relative */
+      z-index: 102; /* Appear above body content that is position: relative */
       top: -4.5rem;
       max-width: 98.125rem;
     }

core/themes/olivero/css/components/header.pcss.css

@@ -18,7 +18,7 @@
 
 .header__left {
   position: relative;
-  z-index: 2;
+  z-index: 102;
   display: flex;
   align-items: flex-end;
   align-self: stretch;
@@ -43,7 +43,7 @@
   body:not(.is-always-mobile-nav) {
     & .site-header__fixable.js-fixed {
       position: fixed;
-      z-index: 2; /* Appear above body content that is position: relative */
+      z-index: 102; /* Appear above body content that is position: relative */
       inset-block-start: calc(-1 * var(--sp4));
       max-width: var(--max-bg-color);
     }

core/themes/olivero/css/components/navigation/nav-button-mobile.css

@@ -36,7 +36,7 @@
 
 .mobile-nav-button {
   position: relative;
-  z-index: 10; /* appear above mobile nav */
+  z-index: 110; /* Appear above mobile nav. */
   display: flex;
   align-items: center;
   -ms-grid-row-align: center;
@@ -67,7 +67,7 @@
 }
   }
 
-/* Text that says "menu" */
+/* Text that says "menu". */
 
 .mobile-nav-button__label {
   position: absolute;

core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css

@@ -7,7 +7,7 @@
 
 .mobile-nav-button {
   position: relative;
-  z-index: 10; /* appear above mobile nav */
+  z-index: 110; /* Appear above mobile nav. */
   display: flex;
   align-items: center;
   align-self: center;
@@ -29,7 +29,7 @@
   }
 }
 
-/* Text that says "menu" */
+/* Text that says "menu". */
 .mobile-nav-button__label {
   position: absolute;
   display: block;

core/themes/olivero/css/components/navigation/nav-primary-wide.css

@@ -161,7 +161,7 @@
 
     body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
       position: absolute;
-      z-index: 5; /* Appear above search container. */
+      z-index: 105; /* Appear above search container. */
       /* stylelint-disable csstools/use-logical */
       top: calc(100% - 0.5625rem);
       left: 50%;

core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css

@@ -85,7 +85,7 @@ body:not(.is-always-mobile-nav) {
 
     & .primary-nav__menu--level-2 {
       position: absolute;
-      z-index: 5; /* Appear above search container. */
+      z-index: 105; /* Appear above search container. */
       /* stylelint-disable csstools/use-logical */
       top: calc(100% - (0.5 * var(--sp)));
       left: 50%;

core/themes/olivero/css/components/skip-link.css

@@ -29,7 +29,6 @@
 }
 
 .skip-link {
-  z-index: 1; /* Appear above header */
   display: block;
   width: 100%;
   max-width: 98.125rem;

core/themes/olivero/css/components/skip-link.pcss.css

@@ -8,7 +8,6 @@
 @import "../base/variables.pcss.css";
 
 .skip-link {
-  z-index: 1; /* Appear above header */
   display: block;
   width: 100%;
   max-width: var(--max-bg-color);

core/themes/olivero/css/components/tabs.css

@@ -110,8 +110,6 @@ html:not(.js) .tabs__tab,
 }
   }
 .tabs__link:focus {
-  position: relative;
-  z-index: 1;
   border-color: #2494db;
   outline: none;
 }

core/themes/olivero/css/components/tabs.pcss.css

@@ -80,8 +80,6 @@ html:not(.js) .tabs__tab,
 }
 
 .tabs__link:focus {
-  position: relative;
-  z-index: 1;
   border-color: var(--color--blue-50);
   outline: none;
 }