Dynamic/responsive solution for overlapping div's

Question

I'm developing more and more sites where the design includes overlapping elements, for example a text-box with an image on top of it.

This is an example of what I am trying to accomplish:

I try to find a good solution for it where it can be easily made responsive and not be broken if the content manager decides to make the text longer for example. And preferably also can easily be animated or made parallax.

At the moment I use a negative margin on my second element:

<div class="back"></div>
<div class="front" style="margin-top:-200px;"></div>

But that's probably not a good solution. I apologize in advance if this question is asked here often.

Answer 1

Your solution of using margin-top on the right div works.

One other solution to this would be to use absolute positioning on the two divs.

With position: absolute, you can give the divs each a z-index. Then give .front a higher z-index than .back, positioning .front "above" .back.

Assuming you want the two divs to be centered as a group in the page, but always maintaining the same positioning and distance to each other:

/* All px amounts are a wild guess. You can adjust to achieve the desired affect. */

.front {
    position: absolute; 
    top: calc(50% - 250px);
    left: calc(50% - 275px);
    z-index: 2;
}

.back {
    position: absolute;
    bottom: calc(50% - 250px);
    right: calc(50% - 275px);
    z-index: 1;
}  

Assuming you want the two divs anchored to their respectives sides, only overlapping if the screen is small enough:

/* all top, left, bottom, and right values are approximations. */

.front {
    position: absolute; 
    top: 25px;
    left: 25px;
    z-index: 2;
}

.back {
    position: absolute;
    bottom: 25px;
    right: 25px;
    z-index: 1;
}