html - 绝对定位以覆盖其他元素但下推其他元素

Question

此时，类“sub-container”覆盖了顶部图像“myimage.png”元素，这很好，但它也覆盖了下面的“main-body-content”元素。

我的问题是，如何只覆盖顶部元素“myimage.png”而不覆盖底部元素“main-body-content”。它应该向下推“主体内容”，而不是覆盖在它上面。

这是我的代码:

   <div class="body">
        <div class="container-position-relative">
            <div class="image-overlay-by-bottom-elements myimage"><img src="myimage.png"></div>
            <div class="overlay-image-above title">Title</div>
            <div class="overlay-image-above-and-push-down-the-main-body-content-below sub-container"> Sub Container </div>
        </div>
        <div class="main-body-content">Main page body content</div>
    </div>


    // css style for myimage
    img {
    position: absolute;
    @include object-fit(cover);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.56;
    filter: alpha(opacify=56);
    }

    // css style for Title
    .title {
    color: #ffffff;
    top: 100px;
    z-index: 10;
    height: 40px;
    font-family: Gibson;
    font-size: 40px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    position: absolute;
    left:0;
    right:0;
    }

    // css style for body
    .body {
    wrap {
    display: block;
    padding-bottom: 35%;
    position: relative;
    background-color: #000000;
    }

    // css style for sub-container
    .sub-container {
        top: 100px;
        z-index: 10;
        position: absolute;
    }

Answer 1

试试这个

.container-position-relative{
    position: relative;
    width: 100%;
    min-height: 300px;
}