CSS Position Sticky - How It Really Works!

My First Play with Position Sticky

I assume most of you have played with position sticky. So had I for quite a while, until I realized that I didn’t totally understand it.

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

The Sticky Exploration

While playing with it, I quickly noticed that when an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick.

<!-- DOESN'T WORK!!! -->
<style>
.sticky{
position: sticky;
top: 0;
}
</style>
<div class="wrapper">
<div class="sticky">
SOME CONTENT
</div>
</div>

How CSS Position Sticky Really Works!

CSS position sticky has two main parts, sticky item & sticky container.

.some-component{
position: sticky;
top: 0px;
}
Sticky item & Sticky container

Understanding the CSS Sticky Behavior

Like I said before, CSS Position Sticky behaves differently than all the other CSS Positions, but on the other hand it does have some similarities with them. Let me explain:

Stick to the bottom?!

In most cases, you will use position sticky in order to stick an element to the top, something like this:

.component{
position: sticky;
top: 0;
}
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
.main-footer{     
position: sticky;
bottom: 0;
}

Browsers Support

  • Position Sticky is supported by all major modern browsers, except for old IE.
  • For Safari browsers you will need to add the -webkit prefix.
position: -webkit-sticky; /* Safari */  
position: sticky;
can i use position sticky — more than 86% browser support

Final Words

That’s all,
I hope you’ve enjoyed this article and learned from my experience.
If you like this post, I would appreciate applause and sharing :-)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store