Detect CSS Element Overlap

Build a CSS demo that changes a sticky card's style when it overlaps content.

Introduction

30 Second Summary

Floating page elements often cross backgrounds with very different colours as you scroll. A style that looks clear over one section can disappear against the next.

In this project, you will use CSS to build a browser demo where a sticky header changes style as it overlaps different content sections. You will also confirm that the page remains readable in a browser without support for the overlap technique.

What You'll Build

You'll scroll through coloured sections and watch your sticky header switch to a readable style as it crosses each background.

By the end of this project, you'll have:

A scrollable overlap demo that shows a sticky header passing over several coloured sections.
An adaptive header that changes its appearance over light and dark content without JavaScript measurements.
A graceful fallback that keeps the header readable when the browser does not support the overlap technique.
Secret Mission: an optional challenge to push your skills further.

Are there any prerequisites?

You only need a browser plus a text editor or CodePen. This project requires no account or installation.

Before We Start

This project uses CSS to let a sticky card react when it overlaps page content. The effect depends on browser features that are still rolling out at different speeds.

A code editor gives you a place to build the page. A current browser reveals the enhanced overlap effect.

A second browser gives you a fallback test. It shows whether the page remains readable when the enhancement is unavailable.

In this step, get ready to:

Confirm that a code editor is available.
Prepare a current browser for the enhanced overlap effect.
Prepare a fallback browser for the unsupported state.

Confirm your code editor

A code editor keeps the page structure plus its styles in one file. Visual Studio Code works well for this small local project.

Press Cmd+Space on macOS or the Windows key on Windows to open your search bar.
Type Visual Studio Code and press Enter to open it.

✔️ Visual Studio Code opens

Your editing workspace is ready. You should see an empty Visual Studio Code window.

ⓧ Visual Studio Code is not installed

The installer may ask for permission to add the app to your computer. Approve that request after confirming you used the official website.

Visit the official Visual Studio Code download page.
Choose the download shown for your operating system.
Run the downloaded installer.
Type Visual Studio Code into your operating system search bar after installation.
Press Enter to open the editor.

Editor not opening?

Confirm that the Visual Studio Code installer finished before searching for the app.
Restart your computer if the installed app does not appear in search results.

Ask for help: Why is Visual Studio Code missing after installation?

Prepare a supporting browser

The overlap demo needs a browser with the required CSS capabilities. A current version of Google Chrome provides the supporting test path.

Press Cmd+Space on macOS or the Windows key on Windows to open your search bar.
Type Google Chrome and press Enter to open it.

✔️ Google Chrome opens

Your primary test browser is available. Chrome applies automatic updates when you close it before opening it again.

Close Google Chrome to apply any pending automatic update.
Use your operating system search bar to return to Google Chrome.

ⓧ Google Chrome is not installed

The installer may request permission to make changes on your computer. Confirm that the download came from Google's official website before approving it.

Visit the official Google Chrome website.
Choose the download for your operating system.
Run the downloaded installer.
Type Google Chrome into your operating system search bar after installation.
Press Enter to open the browser.

Chrome not opening?

Confirm that the Chrome installer completed before searching for the browser.
Restart your computer if Chrome does not appear after installation.

Ask for help: Why will Google Chrome not open after installation?

Prepare the fallback browser

A fallback browser ignores an unsupported enhancement while preserving the page's base styling. The regular release of Firefox keeps the required scroll-driven animation behavior unavailable by default.

Press Cmd+Space on macOS or the Windows key on Windows to open your search bar.
Type Firefox and press Enter to open it.

✔️ Firefox opens with standard settings

Your fallback test browser is ready. Its standard settings preserve the unsupported state that you need later.

Leave Firefox's experimental browser settings unchanged.

ⓧ Firefox is not installed

The installer may request permission to add Firefox to your computer. Confirm that the download came from the official website before approving it.

Visit the official Firefox download page.
Choose the download offered for your operating system.
Run the downloaded installer.
Type Firefox into your operating system search bar after installation.
Press Enter to open the browser.

Firefox not opening?

Confirm that your operating system meets the requirements shown on the official Firefox download page.
Restart your computer if Firefox does not appear after the installer completes.

Ask for help: Why will Firefox not open after installation?

Before the final check, which browser do you expect to reveal the enhanced effect later? Which browser should preserve the fallback?

Switch back to Visual Studio Code from earlier.
Place Google Chrome beside Firefox on your screen.
Confirm that each app has its own visible window.

You should see Visual Studio Code plus two separate browser windows. That gives you one workspace for editing plus two paths for comparing supported and fallback behavior.

Your editing workspace plus both browser test paths are ready. Next, you'll build the page that makes the overlap visible.

Create the Sticky Header Demo

The overlap effect needs a clear HTML stage before you add any reactive styling. A header that stays visible gives you one element to track while the page moves beneath it.

In this step, you'll create a single-page demo with a sticky header above several coloured sections. Scrolling through the page gives you a visible baseline for the overlap technique.

In this step, get ready to:

Save a single-page demo as index.html.
Build a sticky header above multiple coloured content sections.
Scroll through the page to confirm that the sections pass beneath the header.

Create the page shell

The page shell gives your demo one saved file that a browser can load directly. Keeping everything in index.html also makes the finished example easy to keep as a reference.

Press Cmd+Space on macOS or the Windows key on Windows to open your search bar.
Type the name of your code editor into the search bar. Press Enter to launch it.

Create a new file using your editor's file controls.
Save the file on your Desktop as index.html.

You'll see index.html in your editor's file tab. This confirms that the demo has a saved home.

Build a standard HTML document with a header at the top.
Use Create the Sticky Header Demo as the visible header label.
Save index.html.

Press Cmd+Space on macOS or the Windows key on Windows to open your search bar.
Type the name of your modern browser into the search bar. Press Enter to launch it.

Your browser is ready to display the local demo.

Use the browser's file picker to select index.html from your Desktop.

You'll see the header label at the top of an otherwise simple page. That first render proves the browser can read your saved file.

Page Missing in the Browser?

Confirm that the file on your Desktop is named index.html.
Save your current changes in the code editor.
Reopen the saved file with your modern browser.

Ask for help: Why is my saved HTML file missing or blank in the browser?

Add sections and sticky styling

The content sections provide the surfaces that move behind the header. You can see that movement clearly when the sections are tall and visually distinct.

Switch back to the code editor from earlier.
Add three content sections beneath the header.
Save index.html.
Switch back to the browser from earlier.
Refresh the page.

You'll see the three sections stacked beneath the header. Their order establishes the path that the header crosses during scrolling.

CSS controls the height and colour of each section. It also gives the header sticky positioning so it remains attached to the top of the browser window.

Return to the code editor from earlier.
Style each section with a distinct background colour plus enough height to create scrolling.
Save index.html.
Switch back to the browser from earlier.
Refresh the page.

You'll see three tall coloured sections arranged vertically. The page now extends beyond the browser window.

Return to the code editor from earlier.
Style the header with sticky positioning at the top of the page plus a readable default appearance.
Save index.html.

What Does Sticky Positioning Do?

Sticky positioning keeps the header attached to the top edge after scrolling reaches it.

The tall sections continue moving behind the header. This creates the overlap that later styling can respond to.

Verify the sticky overlap

The final check confirms that the header and sections move in relation to each other. This visible overlap is the behaviour your later CSS changes will detect.

Before you scroll, where do you expect the header to stay once the first coloured section moves beneath it?

Switch back to the modern browser from earlier.
Refresh the page.
Scroll slowly from the first coloured section to the last.

You'll see the header stay at the top of the browser window. Each coloured section passes beneath it as you continue scrolling.

That is your first visible win. The header now stays in view while the coloured sections move beneath it.

Header Not Staying at the Top?

Confirm that sticky positioning is applied to the header element.
Confirm that the header is positioned against the top edge.
Increase the section height if the page does not scroll.

Ask for help: Why does my header scroll away instead of staying above the coloured sections?

✔️ Awesome, I've got everything!

Great. Double check that index.html is saved before moving on.

ⓧ I'd like to double check the full code

Compare your index.html page against this required end state.

Confirm that index.html is a saved single-page demo.
Confirm that the page contains a sticky header.
Confirm that the header contains a visible label.
Confirm that multiple coloured content sections provide enough vertical space for scrolling.

Your sticky header demo now has the movement needed for an overlap test. Next, you'll investigate the CSS overlap technique and record where browsers support it.

Research the Overlap Technique

Your sticky-header demo already shows the problem this project solves. Each coloured section passes behind the header as you scroll.

Before you add unfamiliar CSS, you need to understand how the technique detects constrained space. You also need to know where the complete feature set works. The final checkpoint gives you one place to store the results.

In this step, get ready to:

Identify the CSS features that turn constrained space into a style state.
Compare support for CSS anchor positioning with support for the required animation timeline.
Define a readable fallback for browsers without the complete feature set.

Read the source technique

Ahmad Shadeed's method combines CSS anchor positioning with scroll-driven animations. An overflowing measurement element becomes the signal that another element can use to change its appearance.

Return to the modern browser from earlier.
Keep the index.html demo in its current tab.
Follow Detect when elements overlap with CSS in a new tab.
Read the sections titled The problem and Let's solve it.
Use the interactive examples to watch the measured space shrink.
Focus on the moment when the measurement element starts overflowing.

How does the technique work?

CSS anchor positioning uses anchor-name with anchor() to describe the gap between two edges.
A fixed-width pseudo-element makes .measure overflow once that gap becomes too small.
The scroll-timeline property turns that overflow into an animation timeline. The timeline-scope property exposes the timeline beyond the measurement element.
A style container query reads the changed custom property. The matching style can then restyle the target element.

Cross-check browser support

The article requires support for both anchor positioning and scroll-driven animations. The usable browser list comes from the least-supported feature in that chain.

Follow the MDN anchor-name reference.
Scroll to the Browser compatibility section.
Identify the desktop browsers that support anchor-name.
Follow the MDN timeline-scope reference.
Scroll to the Browser compatibility section.
Keep only the browsers that support both required features.

The current tables show support in Chrome 116 or newer. They show support in Edge 116 or newer.

The tables also show support in Safari 26 or newer. Stable Firefox does not support timeline-scope.

Why does the shortest list win?

A browser must understand every feature that carries the overlap signal. Support for anchor positioning alone cannot complete the article's technique.

MDN classifies timeline-scope as having limited availability. That makes the overlap effect a progressive enhancement.

Define the fallback requirement

Progressive enhancement starts with a usable baseline. The overlap styling adds extra feedback in supporting browsers.

Your fallback requirement is simple. A non-supporting browser must keep the sticky header visible while the coloured sections pass beneath it.

Return to the index.html page from earlier.
Leave the source code unchanged during this research step.

Before you scroll, predict which part of the header's current appearance must remain dependable when the browser ignores the future overlap rules.

Scroll through every coloured section.

You should see the sticky header remain in place as each section passes beneath it. This existing appearance becomes the fallback that the overlap enhancement must preserve.

Complete the research checkpoint below with all three findings.

Good work. Your notes now define the feature chain, browser support, and fallback boundary. Next, you'll apply the overlap technique to the header.

Apply the Overlap Style

Your demo already proves that the sticky header can pass over the coloured sections. Its appearance stays fixed during that overlap, so the page cannot show when the collision begins.

The technique from Ahmad Shadeed's article turns the shrinking space between two elements into an overflow signal. In this step, that signal switches the header to a contrasting style.

In this step, get ready to:

Map the article's measurement roles to your sticky header demo.
Create an overlap signal with CSS anchor positioning.
Verify that the header switches styles over a coloured section.

Map the overlap elements

The technique needs one element for each edge of the measured space. An invisible helper fills the gap between those edges.

Return to index.html in the code editor from earlier.
Add decor to the sticky header's existing class list.
Add section to the second coloured content section's existing class list.

Insert the measurement helper directly after the sticky header by adding this code:

<!-- Feed the measured gap into the CSS overlap signal. -->
<div class="measure" aria-hidden="true"></div>

What does this helper do?

The decor class identifies the header whose style responds to the overlap.
The section class identifies the coloured block that triggers the change.
The empty measure element carries the overflow signal without adding visible content.

Save index.html.
Switch back to the browser from earlier.
Refresh the page to confirm that the sticky header still appears above the coloured sections.

Your page should keep its existing layout. The helper stays invisible because it contains no visible content.

Did the layout shift?

Check that the measure element sits directly after the sticky header's closing tag.
Check that you added decor to the header's existing class list without removing its original class.
Check that every opening HTML tag still has its matching closing tag.

Ask for help: My layout shifted after I added the overlap measurement element. Can you help me check its placement?

Build the overlap signal

CSS anchors let the helper follow the bottom edge of the header plus the top edge of the chosen section. Its height shrinks as the section approaches the sticky header.

Add the anchor rules at the end of the existing style element in index.html by using this code:

.decor {
  /* Mark the sticky header as the first edge of the gap. */
  anchor-name: --line;
}

.section {
  /* Mark the coloured section as the second edge. */
  anchor-name: --section;
}

.measure {
  /* Stretch the helper between both anchored elements. */
  position: absolute;
  top: anchor(--line bottom);
  bottom: anchor(--section top);
  left: anchor(--line left);
  right: anchor(--line right);
  pointer-events: none;
  opacity: 0;
}

How is the gap measured?

The anchor-name declarations expose the header plus the selected section as reference points.
The top value follows the header's bottom edge.
The bottom value follows the section's top edge.
The helper becomes shorter as those edges move closer together.

Save index.html.
Refresh the browser to apply the anchor rules.
Scroll to confirm that the header remains sticky while the selected section moves underneath it.

You should still see the original header style. The anchor rules now track the shrinking gap without changing the visible design.

Is the helper affecting the page?

Check that position: absolute appears inside the .measure rule.
Check that the two anchor names begin with two hyphens.
Check that the section carrying section appears below the sticky header in the page.

Ask for help: My measurement helper is changing the page layout. Can you help me debug the anchor rules?

A scroll-driven animation can use the helper's overflow as a timeline. The timeline flips a custom property when the gap becomes too small.

Add the overlap signal below the anchor rules by using this code:

body {
  /* Share the overlap state with the sticky header. */
  --touching: 0;
  timeline-scope: --touch;
  animation: flip-touch 1ms linear;
  animation-timeline: --touch;
}

.measure {
  /* Create a vertical timeline when the helper overflows. */
  overflow-y: auto;
  scroll-timeline: --touch y;
}

.measure::after {
  /* Make a tiny threshold for detecting the collision. */
  content: "";
  display: block;
  width: 100%;
  height: 1px;
}

@keyframes flip-touch {
  from, to {
    --touching: 1;
  }
}

How does the signal work?

The helper becomes vertically scrollable when its available height drops below the pseudo-element's height.
The scroll-timeline declaration turns that overflow into the named --touch timeline.
The flip-touch animation changes --touching from 0 to 1 when the timeline becomes active.

The signal is invisible, so checking it in browser developer tools can feel fiddly. Inspecting the computed custom property confirms that the measurement is responding before you attach a visible style.

Save index.html.
Refresh the browser.
Inspect the page's body element with your browser developer tools.
Scroll until the selected coloured section reaches the sticky header.

You should see the computed --touching value change from 0 to 1 as the gap closes.

Does the signal stay at zero?

Confirm that the browser matches the support notes you recorded earlier.
Check that animation-timeline appears after the animation declaration in the body rule.
Check that --touch is spelled identically in timeline-scope, scroll-timeline and animation-timeline.

Ask for help: My overlap custom property stays at zero while I scroll. Can you help me trace the timeline?

Test the header state

A style container query reads the custom property inherited from the page. The header keeps its original declarations as the fallback state.

Add the conditional header style below the overlap signal by using this code:

.decor {
  /* Switch the header only while the overlap signal is active. */
  @container style(--touching: 1) {
    color: #ffffff;
    background-color: #111111;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.35);
  }
}

What changes during overlap?

The query activates when the inherited --touching value equals 1.
The dark background keeps the header label visible over the coloured section.
The shadow separates the sticky header from the content moving beneath it.
Browsers that ignore the query continue using the header's existing base style.

Before you test it, do you expect the header to keep its base style or switch when the selected section reaches it?

Save index.html.
Refresh the page in the supporting browser from earlier.
Scroll slowly toward the second coloured section.
Continue until that section moves behind the sticky header.

You should see the header switch to a dark background with white text plus a stronger shadow during the overlap. Scroll away from the section to see the header return to its base style.

That is the key result: your sticky header now responds to a real overlap signal using CSS.

Does the header keep one style?

Check that the query uses @container style(--touching: 1) exactly.
Check that the conditional query sits inside the .decor rule.
Check that the sticky header still includes the decor class.

Ask for help: My overlap signal changes but the sticky header style does not. Can you help me debug the style query?

Your header can now detect one overlap state without JavaScript measurements. Next, you'll give the coloured sections their own readable header styles.

Style Each Overlap State

The overlap trigger you added already proves that CSS can react while the sticky header crosses a section. Now the header needs a visual treatment that stays readable on every background.

A single overlap style can blend into one of the coloured sections. In this step, you'll give every section its own header state. You'll capture each result as a screenshot.

In this step, get ready to:

Style the sticky header for every light coloured section.
Style the sticky header for every dark coloured section.
Capture a screenshot of every visible overlap state.

Style the light sections

A dark header colour creates contrast on a light section. A section-specific shadow or label treatment makes that state easy to recognise.

Switch back to the index.html tab in your code editor.
Locate the existing overlap styling that currently changes the sticky header.
Extend that styling with a distinct dark header treatment for the first light section.
Save index.html.
Return to the supporting browser from earlier.
Scroll until the sticky header overlaps the first light section.

You should see the header switch to its new treatment. The label should remain clear against the light background.

What makes an overlap state readable?

Contrast separates the header label from the section underneath it. A dark treatment gives the label a clear edge over a light background.

A colour shift can identify the section. A shadow or label treatment can make the transition more visible.

Return to the index.html tab.
Add a different dark header treatment for the next light section.
Save index.html.
Return to the supporting browser.
Scroll until the header overlaps the section you just styled.
Apply the same edit-and-check loop to every remaining light section.

Every light section should now trigger a recognisable header state. The label should stay readable throughout each overlap.

Style the dark sections

Dark sections need a lighter header treatment to keep the label visible. A distinct colour or shadow gives each section its own overlap identity.

Return to the index.html tab.
Locate the first dark coloured section in the page.
Extend its overlap state with a distinct light header treatment.
Save index.html.
Return to the supporting browser.
Scroll until the sticky header overlaps the first dark section.

You should see the header switch to a lighter treatment. Its label should stand apart from the dark background.

Return to the index.html tab.
Add a different light header treatment for the next dark section.
Save index.html.
Return to the supporting browser.
Scroll until the header overlaps the section you just styled.
Apply the same edit-and-check loop to every remaining dark section.

Before you scroll through the full page, consider which section will demand the strongest contrast.

Scroll from the top of the page to the bottom in the supporting browser.

You should see the header switch to a distinct treatment over every coloured section. Its label should remain readable over both light and dark backgrounds.

Header still hard to read?

Confirm that the section's overlap state becomes active while the header covers that section.
Move any generic header rule above the section-specific overlap rules if it overrides them.
Increase the contrast within the affected state if the label blends into the background.

Ask for help: Why is my sticky header treatment missing or difficult to read over one section?

Capture every overlap state

Each screenshot records one successful state of the finished demo. Together, the images prove that the header remains readable across the full range of section backgrounds.

Create a screenshots folder beside index.html with your computer's file manager.
Create an overlap-states folder inside screenshots.
Return to the supporting browser from earlier.
Position the sticky header over the first coloured section.
Capture a screenshot that shows the sticky header over the section.
Save the image in screenshots/overlap-states with a filename based on the visible section label.
Repeat the capture process for every remaining coloured section.

Before you review the folder, consider whether any two screenshots should show the same header treatment.

Review every image in screenshots/overlap-states with your computer's file manager.

You should have one screenshot for every coloured section. Each image should show a distinct header state with a readable label.

Strong work. Your header now has a readable identity over every coloured section. Next, you'll confirm that the page still looks acceptable in a browser without support for the overlap technique.

Test the Fallback Experience

Your sticky header now adapts to each coloured section in a supporting browser. The saved screenshots prove every intended overlap state works.

The remaining risk is browser support for the overlap CSS technique. This step verifies a graceful fallback that keeps the default header readable when section-specific styling is unavailable.

In this step, get ready to:

Choose a browser or browser version without support for the overlap technique.
Test the default sticky header while scrolling through every coloured section.
Compare the fallback with the saved supported states.

Set the fallback pass criteria

A passing fallback preserves the header's core job. It stays sticky.

Its label remains readable. Section-specific colour, shadow, or label changes may disappear.

Switch back to the overlap-technique-notes from earlier.
Find a browser or browser version listed without support for the overlap technique.
Record the test environment here: your unsupported browser or version.

Prepare the non-supporting test

When a browser cannot apply a CSS feature, it ignores that unsupported behaviour. The remaining supported styles provide the baseline appearance.

Leave the completed index.html unchanged so the test evaluates its existing fallback.
Start your unsupported browser or version in the test environment available to you.
Load the completed index.html file from earlier in that browser.
Move the page to the top.

You should see the default sticky header with its readable label. The section-specific overlap treatment does not need to appear in this environment.

Verify both browser experiences

A side-by-side comparison isolates the effect of browser support. Use the same scroll path in both browsers so the test stays consistent.

Before you make the final comparison, predict which visual behaviours depend on overlap support.

Return to the supporting modern browser from earlier.
Scroll the sticky header through every coloured section.
Compare the visible states with the screenshots in screenshots/overlap-states.
Switch back to the non-supporting browser.
Scroll the sticky header through the same coloured sections.

In the supporting browser, you should see the section-specific colour, shadow, or label treatments captured in your screenshots. In the non-supporting browser, those treatments should remain absent.

The header should stay sticky in both browsers. Its default label should remain readable over every section.

Unexpected fallback result?

Check that your unsupported browser or version matches an unsupported entry in overlap-technique-notes.
Confirm both browsers loaded the same completed index.html file.
Reload the page in the non-supporting browser after confirming the file.

Ask for help: Help me diagnose why my fallback header is changing or becoming hard to read.

That's the resilience check complete: your sticky header stays readable in the non-supporting browser. Your index.html remains unchanged as a dependable reference demo.

Secret mission

Stress-Test Overlap Readability

A visual effect earns trust when it survives cramped layouts. Test the sticky header at a phone-sized width in both browser paths. Prove that every path remains readable without changing the demo.

Clean Up Your Resources

Choose a cleanup option for your local reference materials. This project has no cloud resources or ongoing costs.

Resources you used:

Local index.html reference demo.
Saved overlap screenshots in screenshots/overlap-states.

Keep everything running

No action is needed. Choose this option if you want to reuse the demo in future projects.

Keep index.html as a reference snippet for future overlap designs.
Keep screenshots/overlap-states as visual examples of the supported overlap styles.

Pause - I'll come back to this later

There is no server or cloud service to pause. Closing your current tools leaves every local artifact ready for your return.

Close the browser tab that displays index.html.
Close the code editor from earlier.

Delete - I don't want to use this again

Remove the local reference materials if you no longer need the demo. Deleting them affects only the files on your computer.

Switch back to the code editor from earlier.
Delete index.html from the editor's file list.
Delete screenshots/overlap-states from the editor's file list.
Check the editor's file list for the deleted artifacts.

You should no longer see index.html or screenshots/overlap-states in the file list. There are no online resources to remove.

Nice Work!

You did it. Your index.html reference demo now uses CSS to give its sticky header distinct styles across light and dark content.

You learned how to:

Built a reusable overlap demo where a sticky header changes appearance as it crosses coloured sections.
Documented browser support for the overlap feature using Ahmad Shadeed's article.
Confirmed a readable fallback in a browser or browser version without support for the overlap styling.
Secret Mission: Extended the reference demo through an optional challenge that puts your overlap skills to work.

Ready to quiz yourself?