CSS Position Sticky

Introduction

In CSS we are using a property position to place an HTML element. The values for this property are- static, relative, absolute and fixed. There is one more value to this property which is sticky. In this article, we will see how we can use position sticky for sticky table headers in an easy way. 

Position: sticky

Position sticky works in accordance with the scroll position. The position: sticky has modern browser support as well. It works between relative and fixed position depending upon the scroll position of the viewport. It is in relative position until some scroll position and after reaching one offset it behaves like position fixed and gets sticks on the page. If we want to get back to the original relative position, we need to scroll again to the previous position. 
  • The sticky element - The element on which we apply position: sticky.
  • The sticky container - The parent or wrapper outside the sticky element is termed as the sticky container. The sticky element will stick inside this parent element only.
  • Define top, left, right or bottom - We need to specify any one of this value to make position: sticky work.
Now we will see an example for the position: sticky. We have created one div with class sticky and this is our sticky element. The <body> is our wrapper or sticky container here. So the scope of the sticky element is full <body> viewport. If we scroll the page till one offset, the div gets sticky to the page on the top taking 10px of space. top: 10px will define the position of the element when it sticks. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.sticky {
  position: sticky;
  top: 10px;
  background-color: red;
  font-size: 20px;
  color: white;
  padding: 25px;
}
</style>
</head>
<body>
<h1>Position Sticky Example</h1>
<div>In CSS we are using a property position to place an HTML element. The values for this property are- static, relative, absolute and fixed. There is one more value to this property which is sticky. In this article, we will see how we can use position sticky for sticky table headers in an easy way. In CSS we are using a property position to place an HTML element. The values for this property are- static, relative, absolute and fixed. There is one more value to this property which is sticky. In this article, we will see how we can use position sticky for sticky table headers in an easy way. </div>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
<p>Position sticky works in accordance with the scroll position. The position: sticky has modern browser support as well. It works between relative and fixed position depending upon the scroll position of the viewport. It is in relative position until some scroll position and after reaching one offset it behaves like position fixed and gets sticks on the page. If we want to get back to the original relative position, we need to scroll again to the previous position. Position sticky works in accordance with the scroll position. The position: sticky has modern browser support as well. It works between relative and fixed position depending upon the scroll position of the viewport. It is in relative position until some scroll position and after reaching one offset it behaves like position fixed and gets sticks on the page. If we want to get back to the original relative position, we need to scroll again to the previous position. Position sticky works in accordance with the scroll position. The position: sticky has modern browser support as well. It works between relative and fixed position depending upon the scroll position of the viewport. It is in relative position until some scroll position and after reaching one offset it behaves like position fixed and gets sticks on the page. If we want to get back to the original relative position, we need to scroll again to the previous position. Position sticky works in accordance with the scroll position. The position: sticky has modern browser support as well. It works between relative and fixed position depending upon the scroll position of the viewport. It is in relative position until some scroll position and after reaching one offset it behaves like position fixed and gets sticks on the page. If we want to get back to the original relative position, we need to scroll again to the previous position. Position sticky works in accordance with the scroll position. The position: sticky has modern browser support as well. It works between relative and fixed position depending upon the scroll position of the viewport. It is in relative position until some scroll position and after reaching one offset it behaves like position fixed and gets sticks on the page. If we want to get back to the original relative position, we need to scroll again to the previous position. </p>

</body>
</html>

Position: sticky not working?

In some scenarios, we will see that position: sticky is not working. In the below case, it will not work as it doesn't have any siblings to float on. The sticky element requires siblings to float on. If there are no siblings, the position sticky will not work. 

<div>
<div  style="position: sticky; background-color: red, padding: 25px;">
Position sticky is useful for sticking table headers.
</div>
</div>

Comments