[Resolved] Z-index not working

Home Forums Support Z-index not working

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1389227
    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/

    #1389256
    David
    Staff
    Customer Support

    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;
    }
    #1389301
    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.

    #1389364
    David
    Staff
    Customer Support

    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;
    }
    #1389366
    Morgan

    Great! Works like a charm. Thanks!

    #1389384
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.