share zindex value for edition switcher banner with sticky labs header banner

Author: cemms1

dotcom-rendering/src/components/EditionSwitcherBanner.importable.tsx

@@ -19,7 +19,7 @@ const container = css`
 	position: relative;
 	top: 0;
 	background-color: ${palette.brand[800]};
-	z-index: ${getZIndex('editionSwitcherBanner')};
+	z-index: ${getZIndex('subNavBanner')};
 `;
 
 const content = css`

dotcom-rendering/src/layouts/AudioLayout.tsx

@@ -191,14 +191,17 @@ export const AudioLayout = (props: WebProps) => {
 			</div>
 
 			{format.theme === ArticleSpecial.Labs && (
-				<Stuck>
+				<Stuck zIndex="subNavBanner">
 					<Section
 						fullWidth={true}
 						showTopBorder={false}
 						backgroundColour={sourcePalette.labs[400]}
 						borderColour={sourcePalette.neutral[60]}
 						sectionId="labs-header"
 						element="aside"
+						css={css`
+							position: relative;
+						`}
 					>
 						<LabsHeader editionId={editionId} />
 					</Section>

dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx

@@ -232,14 +232,17 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => {
 						/>
 
 						{format.theme === ArticleSpecial.Labs && (
-							<Stuck>
+							<Stuck zIndex="subNavBanner">
 								<Section
 									fullWidth={true}
 									showTopBorder={false}
 									padSides={true}
 									backgroundColour={sourcePalette.labs[400]}
 									borderColour={sourcePalette.neutral[60]}
 									sectionId="labs-header"
+									css={css`
+										position: relative;
+									`}
 								>
 									<LabsHeader editionId={editionId} />
 								</Section>
@@ -263,6 +266,9 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => {
 							backgroundColour={sourcePalette.labs[400]}
 							borderColour={sourcePalette.neutral[60]}
 							sectionId="labs-header"
+							css={css`
+								position: relative;
+							`}
 						>
 							<LabsHeader editionId={editionId} />
 						</Section>

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -220,14 +220,17 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 			)}
 
 			{format.theme === ArticleSpecial.Labs && (
-				<Stuck>
+				<Stuck zIndex="subNavBanner">
 					<Section
 						fullWidth={true}
 						showTopBorder={false}
 						backgroundColour={sourcePalette.labs[400]}
 						borderColour={sourcePalette.neutral[60]}
 						sectionId="labs-header"
 						element="aside"
+						css={css`
+							position: relative;
+						`}
 					>
 						<LabsHeader editionId={editionId} />
 					</Section>

dotcom-rendering/src/layouts/ImmersiveLayout.tsx

@@ -333,13 +333,16 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 			)}
 
 			{format.theme === ArticleSpecial.Labs && (
-				<Stuck>
+				<Stuck zIndex="subNavBanner">
 					<Section
 						fullWidth={true}
 						showTopBorder={false}
 						backgroundColour={sourcePalette.labs[400]}
 						borderColour={sourcePalette.neutral[60]}
 						sectionId="labs-header"
+						css={css`
+							position: relative;
+						`}
 					>
 						<LabsHeader editionId={editionId} />
 					</Section>

dotcom-rendering/src/layouts/InteractiveLayout.tsx

@@ -298,13 +298,16 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 					</div>
 
 					{format.theme === ArticleSpecial.Labs && (
-						<Stuck>
+						<Stuck zIndex="subNavBanner">
 							<Section
 								fullWidth={true}
 								showTopBorder={false}
 								backgroundColour={sourcePalette.labs[400]}
 								borderColour={sourcePalette.neutral[60]}
 								sectionId="labs-header"
+								css={css`
+									position: relative;
+								`}
 							>
 								<LabsHeader editionId={editionId} />
 							</Section>

dotcom-rendering/src/layouts/ShowcaseLayout.tsx

@@ -332,7 +332,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
 									/>
 								</Stuck>
 							</div>
-							<Stuck zIndex="stickyAdWrapperLabsHeader">
+							<Stuck zIndex="subNavBanner">
 								<Section
 									fullWidth={true}
 									showTopBorder={false}

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -430,7 +430,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 			)}
 
 			{format.theme === ArticleSpecial.Labs && (
-				<Stuck>
+				<Stuck zIndex="subNavBanner">
 					<Section
 						fullWidth={true}
 						showTopBorder={false}

dotcom-rendering/src/lib/getZIndex.ts

@@ -71,9 +71,9 @@ const indices = [
 	'searchHeaderLink',
 	'TheGuardian',
 
-	// The edition switcher banner needs to be below the Edition selector
-	// and the myAccount dropdown in the nav
-	'editionSwitcherBanner',
+	// Banners appearing directly under the nav need to be below
+	// the Edition selector and the myAccount dropdown in the nav
+	'subNavBanner',
 
 	// Sticky table of contents element
 	'tableOfContents',