Position: sticky not working [SOLVED]

Sometimes, when we try to use position property with its value sticky, it may not work. This can happen for many reasons.

So, in this article, I will discuss how to solve the problem - Position: sticky not working.

Why is my position: sticky not working? #

There are many reasons why this problem occurs:

1. Position Sticky will likely not work if any of the element's parents have overflow hidden, scroll, or set to auto.
2. Position Sticky may not work if a parent element has a fixed height.
3. Many browsers do not yet support sticky positioning.

Position: sticky not working inside div element. #

In the first example, we'll add the position: sticky property to a div element inside another div element.

<div class="parent"> 
  <div class="child"> 
     Sticky
  </div>
</div>
<style> 
  .child{
     height:200px;
     position:sticky;
     top:0;
  }
</style>

position: sticky not working inside flex. #

In the second example, we have a flex element and three child elements inside it. We're going to add position: sticky to one of them.

<div class="parent"> 
  <div class="child">Child</div>
  <div class="child sticky">Sticky</div>
  <div class="child">Child</div>
</div>
<style> 
  .parent{
     display:flex;
     align-items:center;
     justify-content:space-between;
  }
  .sticky{
     position:sticky;
     top:0;
  }
</style>

Position: sticky not working with grid. #

In the third example, we will create a grid layout and inside it, we will add three child elements. Then, we will add the position property with its value sticky to the second child.

<div class="parent"> 
  <div class="child">Child</div>
  <div class="child sticky">Sticky</div>
  <div class="child">Child</div>
</div>
<style> 
  .parent{
     display:grid;
     grid-template-columns:1fr 1fr 1fr;
     gap:5px;
  }
  .sticky{
     position:sticky;
     top:0;
  }
</style>

Browser compatibility. #

Many browsers do not yet support sticky positioning.