Member Avatar for SaroGFX

Hello lads,

So i'm struggeling with the following. I want to get the text a little bit closer to the image, but since the image has whitespace itself and I don't want to redo them all, I opted for adding a negative margin to the text.

It seemed to work, but what happens is that the text appears behind the image. I have tried googeling this problem and I've added z-indexes to both elements but nothing has helped. This is probably due to the reasonably complex nature of this template, but maybe there is an easy fix, and I would love to know and learn!

Here is the website that I'm working on and a screenshot of the problem since I obviously can't have a live version of the bug.

http://renardwatches.com/

Screenshot:

Hope someone can help me out.

Cheers,
Saro

  • 3 Contributors
  • 4 Replies
  • 646 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by SaroGFX

Dani AI

Generated

Summary of what fixed it (and why it happens)

The behavior saw — the text visually moved up with a negative margin but sitting “behind” the image — is a stacking-order issue. The quick fix that suggested (making the text container a positioned element so its stacking can be controlled) is correct: negative margins move an element visually but do not change which stacking context it lives in, so z-index can appear to do nothing if the image or one of its ancestors already created a separate stacking context.

What to check and why

  • Inspect the image and its ancestors in DevTools for properties that create stacking contexts: transforms, filters, opacity < 1, will-change, or any z-index on positioned parents. Those will trap elements inside that context.
  • If z-index seems ineffective, give the text container a non-static positioning so z-index can apply (this is what resolved the thread). Temporarily add a visible background/border to the involved elements in DevTools to see which one is drawing above which.
  • Avoid relying on negative margins as a long-term solution — they can create fragile overlaps across breakpoints.

Safer alternatives and quick patterns

  • If the extra whitespace is purely from the asset, trim it in an editor. That’s the cleanest fix.
  • If editing images isn’t possible, crop visually with the image wrapper (overflow:hidden) or use responsive cropping via object-fit/object-position. That keeps markup tidy and avoids stacking hacks. Example pattern:
.thumb-wrap { overflow: hidden; height: 320px; }
.thumb-wrap img { width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block; }
  • For small visual nudges prefer GPU-accelerated transforms (translateY) over large negative margins for smoother rendering and fewer layout surprises.

Recommended Answers

All 4 Replies

Member Avatar for Sean Francis

One solution is to crop the bottom of the image so that the text appears. Another solution is to create a div. Use the image as the background of that div and put text inside that div. The HTML of that div will be like: <div><p>Text</p></div>

Member Avatar for SaroGFX

Hi Sean, the text is already placed in a div with the class info.

Member Avatar for ryantroop

in:
.thumbnail .info

with the negative margin, also add "position: relative"

Member Avatar for SaroGFX

Hi Ryan,

That works! Thank you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.