CSS Position Sticky - How It Really Works!

My First Play with Position Sticky

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

The Sticky Exploration

<!-- 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!

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

Understanding the CSS Sticky Behavior

Stick to the bottom?!

.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

--

--

--

CSS & HTML Expert

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Do Dependency Injection Using Python Type Hints

CI/CD Pipeline for Flavoured Android Apps using Fastlane and Github Actions

LinkedList and Lambdas in Ruby

Launching Docker Container Using Ansible

Localize your web application using DeepL API

How to create a game in pygame

Performance issues detection. Python profiling

How to build a dapp on a private Ethereum network : Part — 5

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
Elad Shechter

Elad Shechter

CSS & HTML Expert

More from Medium

Here’s Why HTML and CSS is Still Relevant in 2022

MDN Styling and Layout w/CSS chapter 8

Three design principles for your CSS layout

A djangster story on Storybook