Help with overlapping sections in 7.1

I followed a tutorial (https://schwartz-edmisten.com/blog/floating-banner-over-two-index-sections-in-squarespace) to float a banner between two sections on a page I am building. All appears fine, but because the section is positioned absolute, much of the content from the below section is falling behind this. I can add some substantial padding to push the content downwards, but the issue I'm having is that when I change the window size and the floating box is expanding for mobile, the padding I apply doesn't properly correlate and it ultimately still gets lost.

Is there a way I ensure the content always sits below the overlapping box? Alternatively, I considered removing the absolute positioning – the issue with this is that I am left with a plain white background on this section behind the floating content and I can't seem to change the colour on this nor see where it's defined in the code?

Thanks! 

You can try position: relative with negative top?

Applied to the floating box instead of absolute? I still have a white background on this section which I don't seem to be able to edit?

Did you end up having any luck with this? I'm having a similar problem with the floating content on mobile. 

@andrea3 do you have a link to the site where you're having issues?

Here's the site: https://abe-demo-71.squarespace.com/?password=demo

The CTA buttons are the floating content.

I think I figured it out (mostly by accident: this my first 7.1 site), but my coding is looking pretty messy:

[data-section-id="5eecf9ca7f4e1119cdb81826"] {
    width: 70%;
    position: absolute;
    min-height: initial!important;
    z-index: 30;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    /*&+section {
        padding-top: 40px;
    }*/
    .content-wrapper {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    @media screen and (max-width: 767px) {
        position: relative;
        min-height: initial!important;
        display: block;
        width: 100%;
        overflow: hidden;
        border-radius: 0px;
        -webkit-transform: translate(-50%, 50%);
        -ms-transform: translate(-50%, 50%);
        transform: translate(-50%, -15%);
    }
}