negative margins

@lifeworks — you tried floats, negative margins and a high z-index, and got the label stuck under the image. @Member#117553 sketched the markup order, @ccube921 suggested baking the caption into the image, and @Luckychap pointed at positioning. The missing piece most people hit here is not “more z-index” but the browser’s stacking rules and the element context that determines which layer actually sits on top.

Browsers only honor z-index within stacking contexts. A parent with its own positioning, a transform, opacity < 1, filter, isolation, or some other properties will create a stacking context that isolates its children from siblings. That means a label can have a large z-index yet still be under an image if they live in different stacking contexts. For a clean reference, see MDN’s explanations of z-index and stacking contexts.

Practical approaches that avoid fragile negative margins:

• Put the image as a container background (or use a semantic <figure> with a positioned caption). Then text naturally sits above the image and stays readable across sizes.
• If you overlay a text element, make the image and label live in the same stacking context: give the wrapper a positioning context and place the label as an overlay inside it. Also check that no ancestor is creating an unexpected stacking context.
• Use a semi-opaque background behind the label (via a child or pseudo-element) for legibility rather than relying on color contrast alone.

Quick debugging checklist: inspect computed styles in DevTools for position, z-index, transform, opacity, or overflow on parents; try temporarily removing transforms/opacity to see stack changes; ensure the label isn’t floated or clipped by overflow:hidden. For static labels, exporting into the image (as @ccube921 said) is fine; for responsive layouts, prefer overlay techniques that keep text selectable and accessible.