如何在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

这是我的尝试。我已经创建了一个示例供您跟进。

首先添加位置：相对于两个部分的父元素，如果没有，则为正文。

然后向图像部分添加绝对位置并操纵顶部值。

instead of

<强>结果：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;