diff --git a/dotcom-rendering/src/lib/adStyles.ts b/dotcom-rendering/src/lib/adStyles.ts index 9d87c6e5a7a..87d4df26645 100644 --- a/dotcom-rendering/src/lib/adStyles.ts +++ b/dotcom-rendering/src/lib/adStyles.ts @@ -2,6 +2,7 @@ import { css } from '@emotion/react'; import { adSizes, constants } from '@guardian/commercial-core'; import { from, textSans12, until } from '@guardian/source/foundations'; import { palette } from '../palette'; +import { getZIndex } from './getZIndex'; const labelHeight = constants.AD_LABEL_HEIGHT; @@ -137,6 +138,7 @@ const spacefinderAdSlotContainerStyles = css` /* this fixes inter-scrollers stealing mouse events */ overflow: hidden; position: relative; + z-index: ${getZIndex('interscrollerAd')}; /* position the iframe absolutely (relative to the slot) so that it is in the correct position to detect viewability */ .ad-slot__content { diff --git a/dotcom-rendering/src/lib/getZIndex.ts b/dotcom-rendering/src/lib/getZIndex.ts index 946e25c784e..37750dcdf2b 100644 --- a/dotcom-rendering/src/lib/getZIndex.ts +++ b/dotcom-rendering/src/lib/getZIndex.ts @@ -57,6 +57,9 @@ const indices = [ // Edition selector in nav - needs to be below stickyAdWrapper 'editionDropdown', + // Interscroller ads need their own stacking context to force the background image below the ad to stop it capturing mouse events + 'interscrollerAd', + // The content displayed by the Details component 'summaryDetails',