Help with Z-index

Support
#1

Hi guys, i need your help. i created a separator and it uses SVG.
it works fine but i suppose since it’s absolutely positioned, it sort of overlays the hero image (the container before the separator) and it doesn’t let the button be clickable.

all the containers are relative, so in theory the separator shouldn’t go out of it, but unfortunately, it does.

could you please take a look at it? i don’t know if by any chance there’s a !important setting on any of the containers that prevent it from going relative, or something :frowning:

#2

Hi There,

Thank you for the detailed information. First I can see on your header button, you have applied the following CSS:

.upfront-button {
    z-index: 9999999900000;
}

It will not work. The button is part of the bar. The bar has Z-index and the entire bar content Z index position is controlled by that.

If we put the bar forward using the Z index value, it will hover on the entire separator thus it is not visible. The only thing we can do is add space below the button on mobile view. Yes, we cannot move the separator anymore because it is position on top already. See this:

@media (max-width: 480px){
.upfront-button {
    margin-bottom: 30px; /*Adjust this accordingly*/
}
}

Doing that will result to a little background issue. The image background bottom edge on the header builder will peek through. Adjust it’s height then and you’re good on this screen.

Hope this helps.