bootstrap parent child grand-child positioning relative to each other-CodePudding

I have a parent div, and have positioned a child on top of it using position-relative, and position absolute. The parent is a large image, and the child is a 3 column row that acts like a band, the height of the band is less than the height of the large image in the parent div. The problem I am facing is the positioning of the third div (not counting the ones in the band), which is the footer.

On small devices since the large image of the parent div is resized I have moved the band with top:100% so that I see the large image, and from the bottom of it you can see the 3 columns, and here is the need to move the footer div at the bottom of the last column of the band (child div)

I have tried fixed-bottom on the last (footer) div, and of course it works, but it leaves white space between the band, and the footer, if not much content in the footer, whereas it overlaps if too much content.

<div class="container-fluid position-relative fz-wrap">
<div class="row h-100 align-items-center">
    <div class="text-center">
        <img class="mx-auto d-flex rounded img-fluid" src="images/lrg-img.jpg" alt="">
    </div>
</div>
<div class="fz-brand-band">
    <div class="row align-items-center">
        <div class="col-12 col-md-4 text-center fz-brand-1">
            <img class="mx-auto d-flex rounded img-fluid" src="images/img-1.png" alt="">
        </div>
        <div class="col-12 col-md-4 text-center fz-brand-2">
            <img class="mx-auto d-flex rounded img-fluid" src="images/img-2.png" alt="">
        </div>
        <div class="col-12 col-md-4 text-center fz-brand-3">
            <img class="mx-auto d-flex rounded img-fluid" src="images/img-3.png" alt="">
        </div>
    </div>
</div>
</div>
<div class="p-2">
    Footer
</div>

The Css

.fz-brand-band {position: absolute; top: 0; background-color: rgba(180, 225, 180, 0.4);}

.fz-wrap {overflow: hidden;}

@media (max-width: 768px) {
.fz-wrap {overflow: visible;}
}
@media (max-width: 768px) {
.fz-brand-band {position: absolute; top: 100%;}
}

CodePudding user response：

Why not changing this...

@media (max-width: 768px) {
.fz-brand-band {position: absolute; top: 100%;}
}

...into this?

@media (max-width: 768px) {
.fz-brand-band {position: relative; top: 100%;
}

What are you trying to achieve with setting position: absolute;?