diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 88ff86f6230..8a27496366f 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -397,6 +397,8 @@ const galleryStyles = css` ${grid.between('grid-start', 'centre-column-end')} grid-row: 7/9; + position: relative; + z-index: ${getZIndex('articleHeadline')}; ${from.tablet} { ${grid.between('centre-column-start', 'grid-end')}; diff --git a/dotcom-rendering/src/components/MainMediaGallery.tsx b/dotcom-rendering/src/components/MainMediaGallery.tsx index 44a6f7abe0c..c1a1830f709 100644 --- a/dotcom-rendering/src/components/MainMediaGallery.tsx +++ b/dotcom-rendering/src/components/MainMediaGallery.tsx @@ -3,6 +3,7 @@ import { isUndefined } from '@guardian/libs'; import { from } from '@guardian/source/foundations'; import { grid } from '../grid'; import { type ArticleFormat } from '../lib/articleFormat'; +import { getZIndex } from '../lib/getZIndex'; import { getImage } from '../lib/image'; import { type ImageBlockElement } from '../types/content'; import { type RenderingTarget } from '../types/renderingTarget'; @@ -19,8 +20,10 @@ type Props = { const styles = css` ${grid.column.all} + position: relative; height: calc(80vh - 48px); grid-row: 1/8; + z-index: ${getZIndex('mainMedia')}; ${from.desktop} { height: calc(100vh - 48px); } diff --git a/dotcom-rendering/src/components/SeriesSectionLink.tsx b/dotcom-rendering/src/components/SeriesSectionLink.tsx index 4ffed2d618f..c76e79027f9 100644 --- a/dotcom-rendering/src/components/SeriesSectionLink.tsx +++ b/dotcom-rendering/src/components/SeriesSectionLink.tsx @@ -19,6 +19,7 @@ import { type ArticleFormat, ArticleSpecial, } from '../lib/articleFormat'; +import { getZIndex } from '../lib/getZIndex'; import { palette as themePalette } from '../palette'; import type { TagType } from '../types/tag'; import { Hide } from './Hide'; @@ -370,6 +371,8 @@ export const SeriesSectionLink = ({ format.design === ArticleDesign.Gallery && css` display: inline-block; + position: relative; + z-index: ${getZIndex('articleHeadline')}; `, format.display === ArticleDisplay.Immersive && css`