[Resolved] Making hero sticky makes it hide other blocks

Home Forums Support [Resolved] Making hero sticky makes it hide other blocks

Home Forums Support Making hero sticky makes it hide other blocks

  • This topic has 5 replies, 2 voices, and was last updated 5 months ago by Ying.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2152426
    Daniel

    I have a home page with a container at the top that functions as a page hero. I would like the page hero to be sticky, so that the rest of the page content scrolls over it. Following advice found here, I assigned the hero container block to the fixed-hero class and added the following CSS:

    .fixed-hero{
    position: sticky;
    /* for Safari: */
    position: -webkit-sticky;
    top: 0;
    }

    This worked, except it made the hero hide some (not all) of the containers on the page, including the page headline. If I added z-index=-1, everything shows as it should, except that the hero is overlain by a whitish color.

    What’s going on? I’ve attached links to two versions of the home page. The only difference between them is that in the second, I’ve assigned the hero to the fixed-hero class.

    Thanks for any help.

    Dan

    #2152449
    Ying
    Staff
    Customer Support

    Hi Dan,

    You just need to find this gb container, and set its inner container z-index to 2:
    https://www.screencast.com/t/lkqs12bzr61

    #2152488
    Daniel

    That works. More generally, I assume it will work to set the z-index of any element that the background hides, for instance the main headline.

    But I’d like to understand the source of the problem. Two questions :

    * Why does setting the hero container’s position affect its z-index?
    * What determines which blocks will be hidden by the hero while others are not?

    Thanks so much,
    Dan

    #2152566
    Ying
    Staff
    Customer Support

    Element with a position value fixed/sticky or with opacity value less than 1 can form a stacking context which puts it on top.

    I think this article should help you to understand how z-index works ๐Ÿ™‚
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

    There’s another way to solve the issue is to add this CSS, then you don’t have to set z-index for each container theoretically.

    .gb-container {
        position: relative;
        z-index: unset;
    }
    #2153342
    Daniel

    Thank you! This is just what I needed, Ying.

    #2153369
    Ying
    Staff
    Customer Support

    You are welcome ๐Ÿ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.