Overlap a button between two sections on a page 7.1

I'm trying to get a button to overlap two sections on a page in Squarespace 7.1. Is it possible? I'm trying to use margins and z-index css to achieve this, but it's cutting off the button (see screenshot). I've also attached a screenshot of what I'm trying to achieve.

This is the current code I'm working with:

///OVERLAP SECTION///

//section 1//
section[data-section-id="644fb51f62ae2860d54fa1b3"]
{z-index: 1;
margin-bottom:0px;}

//button//
#block-yui_3_17_2_1_1682941763085_30867
{z-index:3;}

//section 2//

section[data-section-id="644fb669e22fd95fbe24eee6"]
{
  margin-top: -30px;
  z-index:2;
}

This is the site: jesskasriel.com (pw: inprogress)

Thank you in advance if you can help with this ❤️

THANK YOU SO MUCH 🥹 worked perfectly!

Hi @tuanphan, 

I have used and adapted the code on a website i'm building. Is there a way to make it stay when responsive? 

https://marigold-circle-h5rk.squarespace.com/home-1

//button

#block-yui_3_17_2_1_1684499295374_31180 {
    position: absolute;
bottom: -345px;
  grid-area: none !important;
  width: 12em!important;
    left: 50%;
    transform: translateX(-50%);
}
#block-yui_3_17_2_1_1684499295374_31180 a.sqs-button-element--primary.sqs-block-button-element {
    padding: 1.2em 1.9em !important;
    display: block !important;
}
#block-yui_3_17_2_1_1684499295374_31180 div {
    height: auto !important;
    display: block !important;
}
section[data-section-id="646751027caf7d54b08a96cd"] {
    z-index: 123456789 !important;;
}
 

7 hours ago, MillyBanks said:

Hi @tuanphan, 

 

I have used and adapted the code on a website i'm building. Is there a way to make it stay when responsive? 

https://marigold-circle-h5rk.squarespace.com/home-1

 

//button

#block-yui_3_17_2_1_1684499295374_31180 {
    position: absolute;
bottom: -345px;
  grid-area: none !important;
  width: 12em!important;
    left: 50%;
    transform: translateX(-50%);
}
#block-yui_3_17_2_1_1684499295374_31180 a.sqs-button-element--primary.sqs-block-button-element {
    padding: 1.2em 1.9em !important;
    display: block !important;
}
#block-yui_3_17_2_1_1684499295374_31180 div {
    height: auto !important;
    display: block !important;
}
section[data-section-id="646751027caf7d54b08a96cd"] {
    z-index: 123456789 !important;;
}
 

 

The page doesn't exist

Hi @tuanphan!

sorry try /home-5

___________________________

I have used and adapted the code on a website i'm building. Is there a way to make it stay when responsive? 

https://marigold-circle-h5rk.squarespace.com/home-1

//button

#block-yui_3_17_2_1_1684499295374_31180 {
    position: absolute;
bottom: -345px;
  grid-area: none !important;
  width: 12em!important;
    left: 50%;
    transform: translateX(-50%);
}
#block-yui_3_17_2_1_1684499295374_31180 a.sqs-button-element--primary.sqs-block-button-element {
    padding: 1.2em 1.9em !important;
    display: block !important;
}
#block-yui_3_17_2_1_1684499295374_31180 div {
    height: auto !important;
    display: block !important;
}
section[data-section-id="646751027caf7d54b08a96cd"] {
    z-index: 123456789 !important;;
}
 

I see some learn more buttons on the page. You want to do for all buttons?

https://marigold-circle-h5rk.squarespace.com/home-5