CSS Underdog Rule: position: sticky;

PH: Hitarth Jadhav from Pexels

If you just started learning CSS, these days it’s quite easy to get caught up in the life improvements that every year comes to our hands. To ease our work as much as they can leaving room for us to concentrate on design/story/content placement and whatnots.

Don’t even get me started on frameworks. “I don’t need to know how flexbox and grid works, because bootstrap uses it for me!” Oh... ok.

Quick look at position

position: static; This is the default position. Nothing special about this one. The element will just be positioned with the flow of the HTML.
position: relative; Position relative works in pretty much expected behavior. It’s relative to itself. As soon as something is relative, when you set top, bottom, left or right property, the element will be offsetting x units from the used direction. Down here we see two boxes with left: 100px from their original position.

CLICK ME TO SEE SOME CODE

position: absolute; Position absolute works in a very similar way. The only thing that changes, is in relation to what the element will move. With absolute, the element will ignore the complete flow of the document, and move in relation to the next parent container with a non-static position.

Here we’ll see two elements. One is inside a relative container, with bottom: 0 and left: 45%. Whether as our other box, will ignore this container since it’s his sibling, and we’ll go all the way to top: 0 of it’s next non-static container. And if he doesn’t find one, it will reach the top of the HTML document

CLICK ME TO SEE SOME CODE

position: fixed; Position fixed, works in a similar way than absolute. It has two main differences. The element will position in relation to the viewport. And will stay fixed there, through the whole document. Here we will see one element fixed to the top (top: 0) and the other one will just be hanging at right: 0, top: 0, with position absolute.

CLICK ME TO SEE SOME CODE

And we have one missing…

PH: https://www.pexels.com/es-es/@pixabay

position: sticky;

Ok, so it’s not that complicated. It doesn’t require a whole section inside the article. I’m just a drama queen.

Sticky has properties similar to fixed. Will “go over the flow of the document”(yes but not really, please bear with me), you will set a specific position, and it will get fixed there. And I don’t even have to make an example for that, just go the position fixed fiddle, look for our fixed box and change the fixed property, for sticky. There you go! nothing different right?

Well, the only difference would be if you do something like this.

JUST CLICK IT ALREADY

Basically, what’s happening is that every box with sticky property will behave as a relative element. As long as viewport does not get to define offset.

.sticky-top-0 {
  position: sticky;
  top: 0;
}

In this case, when we have 0 pixels offset to the top of viewport (aka, when user scrolls down, and viewport top is 0px away from our element), sticky will start behaving like “fixed” element. But, not quite. In the end, it’s not fixed, it’s sticky.

There are a few limits and definitions that make this behavior slightly different, and will also give you way more power over sticky to write a few cool tricks if you are more creative than me.

The family element

A very important aspect of this property is the parent and sibling elements. If you pay attention closely, our sticky element will go all the way he can go, inside its container. But then, when its container ends, he stops, and just sits there, waiting for that viewport to pick him up.

This happens because the sticky property will only take place inside the element parent container. And will only work, against their sibling. But, as soon as this sticky element meets something that suddenly, it’s not a sibling, it has to respect the original flow of the document again, and won’t be able to overlap it. In other words, sticky: off.

This is important to understand and to actually gain more power over this simple property, and make more cool stuff that just “a navbar that wasn’t on top: 0 at the beginning”.

One more thing regarding siblings, if you set a siblings as sticky as well, then keep in mind that no sticky element will stop, and they will just stack above each other. If you are doing this, remember to set a background color for those elements!

The z-index element.

This is a tricky one. Usually, if you read information of position sticky on docs, you won’t find this annoying detail. And that is because is not a position: sticky thing, but just how visual formatting works (and this link also).

To put it short, if you suddenly place a sibling element as non-static, and this element comes after the sticky one, your sticky will go under this non-static element. And here is where z-index comes into place.

z-index-syntax {
  z-index: int_number
}

And just in case you don’t know how that works, don’t feel like reading that doc or open a new tab, most negative values will draw first, then positive numbers (least positive first).

So, for example, if we have this code

<div class="container">
  <div class="sticky"></div>
  <div class="relative"></div>
</div>

You’ll have this issue. And will need to change the z-index property of your sticky element, to a positive value. Like 100, or whatever number fits your current layout, if you’ve been playing with z-index before.

PH: Ylanite Koppens from Pexels

Creativity time

Well now is up to you! But this tool is much more powerful than you would think at first.

Mix something like this

HEY PST, WANNA SEE SOME CODE?

With tools like grid, flexbox or even a… f r a m e w o r k to get some cool responsive layouts, without even thinking of using javascript or something else than CSS + HTML!

Think about the possibilities. A foot bar that will go all the way up once you reach there? You can do that! And how about… eh… a navbar that doesn’t start on top: 0 (I’m sorry imagination doesn’t run through my family).

And basically, that’s almost everything that can go wrong, and almost everything you need to know to make it right. You do need to keep in mind, that old browsers do not support this property, but overall most of what we use today run it just fine.

I hope that my experience had helped you, or at least gave you a hint to where to start looking to fix that bug. :)