Question

这时，类“ sub-container”被覆盖在顶部图像“ myimage.png”元素上，这很好，但是它也覆盖了下面的“主体内容”元素。

我的问题是，如何只覆盖顶部元素“ 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;
}

绝对位置以覆盖其他元素，但按下其他元素

1 个答案: