如何使一个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>