CODEWITHSUNDEEP
htmlcss
Reacting
Reacting

Reputation: 6123

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

This is how it looks so far: enter image description here

And this is what I need to achieve:

enter image description here

<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>

Upvotes: 0

Views: 397

Answers (1)

MontyGoldy
MontyGoldy

Reputation: 749

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>

Upvotes: 1

Related Questions