Overlap / layering
Letting elements cross over each other's edges on purpose, so the page reads as stacked layers instead of stacked blocks.
See it
What it is
Overlap is letting elements cross each other's edges on purpose: a card that hangs off the bottom of the hero image, a headline that sits half on the photo and half on the background, a screenshot that pokes out of its section band. It makes a page feel like stacked paper instead of stacked boxes, and it visually stitches two sections into one idea. Swiss posters did it with type on image; Apple and Stripe product pages do it with panels on gradients.
Three ways to build it: a negative margin pulling the next block upward, CSS Grid with two children placed in the same grid area, or absolute positioning with transform for fine offsets. Depth cues sell it: a shadow, a border, or a small scale difference tells the eye which layer is on top.
Gotcha: z-index only competes inside its own stacking context, so a parent with transform, filter, opacity below 1, or will-change will trap your top layer no matter how big the number is. Also watch overflow: hidden on the section, which clips the overhang, and check narrow screens, where a graceful overlap turns into text landing on a busy part of the photo. Give it a breakpoint escape.
Ask AI for it
Make this section overlap the one above it. Pull the content card up so roughly 25% of its height sits on top of the hero image, using a negative top margin (or CSS Grid with both blocks in the same grid area). Give the card a solid background, generous padding, a soft large-radius shadow, and a higher z-index so it clearly reads as the top layer. Make sure no ancestor has overflow: hidden or a transform that would clip it or trap the stacking context. Below 768px, remove the negative margin and stack the two blocks normally.