Sticky revealing footer

Let me break down some bits that we covered in the video for you.

In order to make the footer sit below the <main> element — and any other siblings — we need to make sure its z-index wins.

By applying position: relative to the <main> element, we create a new stacking context. We can then apply z-index to that. Without creating a new stacking context, our z-index will be ignored. Because the <footer> is position: sticky, that is also a new stacking context. There’s a few ways you can do it without using position too.

We also need to apply a background colour because when the <footer> isn’t in its docked state and because it’s sticky, it will be behind the <main> and getting in the way of content as you scroll the site.

main {
  position: relative;
  z-index: 1;
  background: var(--color-light);
}

Our <header> is also a sibling of the <footer> and the <main>, so we applied the same treatment to that too.

For the footer itself, all we have to apply is the following CSS (along with what is already there):

footer {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 0;
}

You can see this live over on the Set Studio site!

Advert