CODEWITHSUNDEEP
htmlcss
mana
mana

Reputation: 1239

Position absolute to overlay other element but to push down other element

At this point, the class "sub-container" is overlay the top image "myimage.png" element, which is fine, but the it also overlay the "main-body-content" element below.

My question, how can I only overlay the top element "myimage.png" but don't overlay the bottom element "main-body-content". It should push down the "main-body-content", not overlay above it.

Here's my code:

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

Upvotes: 0

Views: 590

Answers (1)

Par Tha
Par Tha

Reputation: 1531

Try this

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

Upvotes: 1

Related Questions