[Resolved] Making hero sticky makes it hide other blocks

[danhotchkiss]

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

[Ying]

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

[danhotchkiss]

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

[Ying]

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;
}

[danhotchkiss]

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

[Ying]

You are welcome 🙂

[Author]

Posts