How to make an image inside a div overlap another div? - html

Question

This is how it looks so far:
And this is what I need to achieve:
<section class="section sub-masthead--TC2"></section>
<section class="section qualifiers--Q1"></section>
The first <section class=sub-masthead--TC2> element contains the image in some nested divs. With the design above is very clear what I need. I already set position: relative to both sections and z-index: 1 to the upper section and z-index: 3 to the down one but it doesn't work.
This is the whole HTML for the section that contains the image:
<section class="section sub-masthead--TC2">
<div class="sub-masthead__wrapper">
<div class="sub-masthead__tiles">
<div class="sub-masthead-item">
<div class="sub-masthead-item__content">
<div class="sub-masthead-item__copy">
<p><!-- text --></p>
</div>
</div>
<div class="sub-masthead-item__image-container">
<!-- IMAGE HERE -->
<img class="sub-masthead-item__image" src="assets/images/bg_phone-unique.png" alt="" role="img">
</div>
</div>
</div>
</div>
</section>

Answer 1

Here is my try. I have created an example for you to follow along.
First add position: relative to the parent element of both sections or if there is none then the body.
Then add position absolute to image section and manipulate top values.
.sub-masthead--TC2 {
position: absolute;
top: 40px;
right: 0;
}
Result:
.wrapperDiv {
position: relative;
}
.sub-masthead--TC2 {
width: 100%;
height: 100px;
background-color: tomato;
}
.qualifiers--Q1{
width: 300px;
height: 300px;
position: absolute;
top: 40px;
right: 0;
border: 1px solid #000;
padding: 20px;
}
img{
width: 100%;
height: auto;
}
<div class ="wrapperDiv">
<section class="section sub-masthead--TC2"></section>
<section class="section qualifiers--Q1">
<img src="https://placeimg.com/640/480/any" />
</section>
</div>