column position fixed hides underneath header – z-index?

Hi there,

When you have a look on the website, you see a green “button” (it is actually no real button, it’s a column styled like a button) next to the burger menu. I’ve put 1/5 column into the footer page, position fixed. It should be used for a “Call to action” button (when you click on it, a pop up opens). The thing is, that it hides underneath the header. You don’t see it in the first place, because the header is transparent, but you can’t klick on the button. When you scroll down it hides completley underneath the sticky header. I put quite some code into quick css to style the header – i used different code for the different devices.

Can you pleas give me the right classes / ids to set the right z-index? I’ve allready searched for ours….

on mobile view the “button” is set position fixed on the bottom of the viewport – when you scroll all the way down you can see that it hides underneath the socket.

thank you in advance!

Here is the code, please see link in private content.

/*HEADER MOBILE*/
@media only screen and (max-width: 767px){
.buchen-button{
right: 0px!important;
float: none!important;
height: 30px;
position: fixed!important;
bottom: -20px!important;
z-index: 999!important;
}

.buchen{
top: 5px!important;}

#avia2-menu{
background: #ffffff!important;
width: 100%important;
float: left!important;
position: fixed!important;
height: 50px!important;
-webkit-box-shadow: 5px 5px 15px -9px #000000;
box-shadow: 5px 5px 15px -9px #000000;}

.responsive #header_meta .sub_menu>ul{
text-align: left;
left: -1px!important;
}

.header_color .phone-info {
float: right!important;
text-align: right!important;
height: 40px;
position: fixed;
background: #ffffff;
left: 50%!important;
top: -12px!important;
width: 50%!important;
z-index: 20!important;
}

#menu-item-wpml-ls-4-en{
top: 18px;
font-weight: 100!important;
font-family: ‘lothos-pro’;
font-size: 20px!important;
background: #ffffff!important;
position: fixed;
z-index: 20!important;
}

.av-hamburger{
background: #3074b5;
padding-right: 20px;
padding-left: 10px;
margin-right: -30px;
margin-top: 15px!important;}

#header_main{
top: 30px!important;
height: 125px!important;}
}

/*HEADER TABLET*/

@media only screen and (min-width: 768px) and (max-width: 989px) {
.buchen-button{
width: 150px!important;
height: 80px;
position: fixed!important;
top: 50px!important;
left: 70px;
z-index: 999!important;
}
.buchen{
top: 25px!important;
bottom: 25px;
}

#header {
position: fixed !important;
height: 87px!important;
z-index: 10!important;}

#header_meta{
background: transparent!important;
z-index: 1!important;}

.logo img{
max-height: 60px;
height: 60px;
left: 5px;
top: 8px;}

.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container{
width: 60%;
float: left;
top: -80px;
}

.html_header_top #top .av_header_stretch .container{
width: 40%;
float: right;
}

.av-hamburger{
background: #3074b5;
padding-left: 20px;
padding-right: 15px;
margin-left: -20px;}

#menu-item-wpml-ls-4-en{
top: 20px;
font-weight: 100!important;
font-family: ‘lothos-pro’;
font-size: 20px!important;
}

.av-hamburger-inner, .av-hamburger-inner:before, .av-hamburger-inner:after{
background-color: #ffffff!important;}

}
/*HEADER TABLET HORIZONTAL*/
@media screen and (max-width: 1100px) and (min-width: 989px){
.html_header_top #top .av_logo_right .logo {
right: 46%;
max-height: 50px;
height: 50px;
}
.buchen-button{
width: 150px!important;
height: 80px;
position: fixed!important;
margin-top: -32px!important;
left: 112px!important;
z-index: 999!important;
}
.buchen{
top: 25px!important;}
}

/*HEADER DESKTOP*/
@media only screen and (min-width: 989px) {
/*buchen button*/
.buchen-button{
width: 150px!important;
height: 80px;
position: fixed!important;
top: 32px!important;
left: 130px;
z-index: 999!important;
}
.buchen{
top: 25px!important;}

/*Flyout von links*/
.html_av-overlay-side .av-burger-overlay-scroll {
right: auto;
left: 0;
}

.html_av-overlay-side .av-burger-overlay-scroll {
width: 350px;
-webkit-transform: translateX(-350px);
transform: translateX(-350px);
}

#header_main {
top: -80px;
}

#menu-item-wpml-ls-4-en{
top: 20px;
font-weight: 100!important;
font-family: ‘lothos-pro’;
font-size: 20px!important;
}

.phone-info with_nav{
top: 10px!important;
}

.av_minimal_header .header_bg {
background: #f8f8f8;
height: 80px!important;
}

div#header_meta{
float: right;
width: 25%;
border: none!important;
height: 80px!important;
top: -2px!important;
}

/*change color phone info scroll*/
.header-scrolled{
transition: none!important;}

.header-scrolled .phone-info span {
color: #000000!important;
}

/*hide logo*/
.av_header_transparency .logo {
opacity: 0;
transition: none;
}

/*menu left logo center*/

.html_header_top #top .av_logo_right .logo {
right: 45%;
max-height: 70px;
height: 70px;
top: 3px;
}

/*Burger background*/
.av-hamburger {
background: #3074b5;
padding-left: 20px;
padding-right: 5px;
top: -7px!important;
vertical-align: top!important;
margin-left: -40px!important;
height: 81px!important;
line-height: 80px!important;
}

/*Burger Menu Beschriftung*/
span.av-hamburger:after {
content: ‘MENÜ’;
padding-left: 8px;
padding-right: 8px;
font-size: 20px;
color: #ffffff;
float: right;
}
}