Problem description

Create a long page with multiple content sections and a header banner (<div class="banner">). The banner should scroll with the page initially but become fixed at the top of the viewport after the user scrolls past its original position. While sticky, it should overlap the content below without pushing it down.

Goal

Ensure the banner sticks to the top after its threshold and overlays page content beneath.

Constraints

• Use CSS only (no JavaScript is allowed).

• The banner height is 60px.

• Stickiness starts at the banner’s original top offset.

• The banner must overlap content, not push it.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.