[Resolved] Z-index not working

[Morgan]

I’m trying to target the image in the Hero Section with z-index so that it overlap down on the white section. No matter what i do it just dont seem to work. Any ideas? What am i missing here?

https://wordpress-240712-1370872.cloudwaysapps.com/

[David]

Hi there,

theres several issues here in your CSS and design:

1# Overflow hidden

.page-hero {
    position:relative;
    overflow:hidden;
}

This will stop any element from escaping the hero container.
FIX: Remove overflow hidden.

#2 Clipping paths will also block overflow:

.page-hero {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
    margin-bottom: 2vw;
}

FIX ( experimental ): Set your Hero background color to white. And use this CSS for the clipping path:

.page-hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #007aa5;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%);
    margin-bottom: 2vw;
}

[Morgan]

Thanks David,

It seems to work, but another issue appears when i delete ‘overflow: hidden’. I want the image to float out of screen on mobile. Therefore i needed the ‘overflow: hidden’ to get rid of the horisontal scroll that appears now. Any ideas on that?

I have tried ‘overflow-x: hidden’ but i have not got that to work.

[David]

You can add a wrapper around the entire page content with this PHP Snippet:

add_action( 'wp_body_open' , function() {
    echo '<div class="overflow-wrapper">';
} );

add_action( 'generate_after_footer' , function() {
    echo '</div>';
} );

then your CSS would be:

.overflow-wrapper {
    overflow-x: hidden;
}

[Morgan]

Great! Works like a charm. Thanks!

[David]

Glad to be of help.

[Author]

Posts