What is the best way to make divs overlap?

Hi everyone,

I would appreciate some tips on how to make divs (h3s, etc.) overlap and still stay mobile friendly.

Here’s an example:

What is the best way to have the ABS SYSTEMS heading appear on top of everything else and stay there on all/most devices?

I know about z-index but am not sure if this is the best way to achieve the overlap effect.

Any other ideas?

Thanks very much.

The z-index will only change stacking order, not the x & y positioning.
Relative positioning can be used to offset elements in x y space and create an overlap. But you may have to think carefully how you apply the offsets to keep responsive.

I would like to throw in “position:absolute” along with “position:relative”, or possibly negative margins. And repeat the caviat that you need to consider how elements are resized at different widths.

The “best” method to use depends on context… the rest of your page and how the positioned elements are used.

1 Like

I see… Thanks for the tips!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.