Display footer behind scrollbar content - css

Question

Can you please assist I need to set footer in the below image behind my scrollbar to show all the contents in the scrollbar.
Image:: enter image description here
I edited below css to remove the z-index and the footer is now behind the scrollbar records but now am facing an issue with the menu button all the menu pages are inactive as per the image below.
Image 2: enter image description here
CSS code::
.page-footer {
position: fixed;
z-index: 10; // I removed this
bottom: 0;
height: $footer-height;
min-width: 100vw;
.page-footer__background {
clip-path: polygon(0 64%, 100% 0, 100% 100%, 0% 100%);
background-image: url('../resources/images/picture-2.jpg');
background-size: cover;
background-position: center;
position: absolute;
width: 100%;
height: 100%;
}
.page-footer_background-svg {
width: 100%;
height: 100%;
fill: white;
}
.floating-action-button {
width: 57px;
height: 57px;
position: absolute;
top: -22px;
right: 20px;
border-radius: 100%;
border: 5px solid white;
background: white;
box-shadow: 4px 1px 10px rgba(0, 0, 0, 0.2);
.floating-action-button-inner {
width: $floating-action-button-size;
height: $floating-action-button-size;
background: white;
position: absolute;
border-radius: 100%;
top: -1px;
left: -1px;
cursor: pointer;
border: 1px solid $color-daimler-petrol-d2;
text-align: center;
}
.floating-action-button-sub-buttons {
margin: 0;
padding: 0;
position: absolute;
left: ($floating-action-button-size - $floating-action-sub-button-size) * 0.5;
top: -5px;
}
.floating-action-button-sub-buttons.fab-hidden {
height: 0;
overflow: hidden;
}
.floating-action-button-sub-button {
background: white;
width: $floating-action-sub-button-size;
height: $floating-action-sub-button-size;
border-radius: 100%;
margin: 0 0 $floating-action-sub-button-margin 0;
padding: 0;
list-style: none;
position: absolute;
text-align: center;
line-height: $floating-action-sub-button-size;
color: $color-daimler-petrol-d2;
cursor: pointer;
opacity: 0;
transform: translate3d(0, 30px, 0);
//z-index: 500 !important;
span:nth-child(1) {
transition: ease opacity 0.3s 0.1s;
opacity: 0;
position: absolute;
text-align: right;
right: $floating-action-sub-button-size;
width: 200px;
padding-right: 10px;
color: #FFFFFF;
}
span:nth-child(2) .icon {
font-size: 18px;
}
}
.floating-action-button-sub-buttons.fab-visible .floating-action-button-sub-button {
opacity: 1;
transform: translate3d(0, 0, 0);
span:nth-child(1) {
opacity: 1;
transition: ease opacity 0.3s 0.6s;
}
}
}
#for $i from 1 through 10 {
.floating-action-button-sub-button:nth-child(#{$i}) {
transition: all ease-out 0.4s #{0.1 * $i}s;
top: #{(strip-unit($floating-action-sub-button-size) + strip-unit($floating-action-sub-button-margin)) * $i * -1}px;
}
.floating-action-button-sub-buttons.fab-hidden .floating-action-button-sub-button:nth-last-child(#{$i}) {
transition: all ease-out 0.1s #{0.03 * $i}s;
}
}
.floating-action-button-burger {
position: relative;
transform: rotate(0deg);
transition: 0.2s ease-in-out;
cursor: pointer;
top: 18px;
left: 14px;
span {
display: block;
position: absolute;
height: 1px;
width: $floating-action-button-burger-width;
background: $color-daimler-petrol-d2;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: ease transform 0.2s, ease opacity 0.3s 0.2s, ease top 0.3s 0.2s;
}
}
.floating-action-button-inner {
span:nth-child(1) {
top: 0;
}
span:nth-child(2), span:nth-child(3) {
top: $floating-action-button-burger-margin;
}
span:nth-child(4) {
top: $floating-action-button-burger-margin * 2;
}
}
.floating-action-btn-active .floating-action-button-inner {
span {
transition: ease transform 0.2s 0.3s, ease opacity 0.3s, ease top 0.3s;
}
span:nth-child(1) {
top: $floating-action-button-burger-margin;
opacity: 0;
}
span:nth-child(2) {
transform: rotate(45deg);
}
span:nth-child(3) {
transform: rotate(-45deg);
}
span:nth-child(4) {
top: $floating-action-button-burger-margin;
opacity: 0;
}
}
.floating-action-button-pill {
position: absolute;
left: -29px;
top: 42px;
padding: 2px;
border: 1px solid $brand-primary;
background: white;
border-radius: 100%;
}
.floating-action-button-pill-inner {
padding: 5px 7px;
background: $brand-primary;
border-radius: 100%;
text-align: center;
line-height: 20px;
min-width: 30px;
min-height: 30px;
}