如何使位置绝对表现像显示块？

Question

我创建了一个部分。我希望本部分中的元素在敏感时不影响下一部分。 我该如何解决这个溢出问题？预先非常感谢。

第一个链接-> https://i.hizliresim.com/XMnYqO.jpg 第二个链接-> https://i.hizliresim.com/lqozvp.jpg

我的代码；

<!-- Start Interest -->
<section id="interest" class="padding-section">
    <div class="bg-overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-xl">
                <div class="wrapper-interest">
                    <div class="banner-content text-center">
                        <div class="wrapper-title">
                            <div></div>
                            <div></div>
                            <div></div>
                            <h2 class="d-inline-block ml-4 mr-4">Interests</h2>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        <p>Lorem ipsum dolor sit amet, dolore magna aliqua.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row container wrapper-interest-row mt-4">
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                <div class="card rect border-0 custom-border-radius-2">
                    <div class="card-body sub-title text-center">
                        <img src="assets/images/interest_1.png" alt="interest icon">
                        <h5>Photography</h5>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                <div class="card rect border-0 custom-border-radius-2">
                    <div class="card-body sub-title text-center">
                        <img src="assets/images/interest_2.png" alt="interest icon">
                        <h5>Vanlife</h5>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                <div class="card rect border-0 custom-border-radius-3">
                    <div class="card-body sub-title text-center">
                        <img src="assets/images/interest_3.png" alt="interest icon">
                        <h5>Foods</h5>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
                <div class="card rect border-0 custom-border-radius-3">
                    <div class="card-body sub-title text-center">
                        <img src="assets/images/interest_4.png" alt="interest icon">
                        <h5>Reading</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Interest -->

我的CSS代码；

#interest {
    background: url(../../assets/images/bg_interest.jpg);
    position: relative;
    top: 0;
    left: 0;
    height: 360px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#interest .bg-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.wrapper-interest .banner-content {
    margin-top: 0;
}

.wrapper-interest .wrapper-title {
    margin-top: 0;
}

.wrapper-interest .banner-content h2 {
    font-family: 'K2D', sans-serif;
    font-size: 4.4rem;
    letter-spacing: 1px;
    font-weight: 600;
    line-height: 1.1;
}

.rect {
    box-shadow: 0px 6px 15px 0px rgba(255, 88, 88, .2);
}

.rect-2 {
    box-shadow: 0px 6px 15px 0px rgba(62,67,233,.2);
}

.wrapper-interest-row {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    min-height: auto;
    margin: 0 auto;
}