Как сделать так, чтобы изображение внутри div перекрывало другой div?

Question

Вот так это выглядит:

И вот чего мне нужно добиться:

<section class="section sub-masthead--TC2"></section>
<section class="section qualifiers--Q1"></section>

Первый элемент <section class=sub-masthead--TC2> содержит изображение в некоторых вложенных div с. С дизайном выше очень ясно, что мне нужно. Я уже установил position: relative для обоих разделов, z-index: 1 для верхнего раздела и z-index: 3 для нижнего раздела, но он не работает.

Это весь HTML-код для раздела, содержащего изображение:

<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

Вот моя попытка.Я создал для вас пример для подражания.

Сначала добавьте позицию: относительно родительского элемента обоих разделов или, если его нет, тогда тело.

Затем добавьте абсолютную позицию к изображениюраздел и манипулирование верхними значениями.

.sub-masthead--TC2 {
  position: absolute;
  top: 40px;
  right: 0;
}

Результат:

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