CSS Position Sticky Not Working
In this article, we will see how to use CSS position sticky. And Sticky position didn’t work for some people, let’s see how to fix it. CSS position property is used to position an HTML element in an HTML document. The CSS position property has five types of value and sticky is one of them. If your CSS sticky position is not working, you should add the “top” property.
It is used to position and sticks an HTML element relative to the top edge of the browser viewport.
Note: while using the position property; we take the help of left, right, bottom, top and z-index properties to position an HTML element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML DEMO</title>
</head>
<style type="text/css">
div{
color: white;
text-align: center; }
#header{
background-color: orange;
position: sticky;
top: 0px;
min-height: 50px; }
#content{
background-color: black;
color: white;
min-height: 500px;
text-align: center; }
#footer{
background-color: silver;
min-height: 50px; }
</style>
<body>
<div id="header">HEADER TITLE</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</body>
</html>Output: The header is sticky even when I drop the scrollbar all the way down.
- In the above code, we have created three <div> tags inside the body section for the header, content, and footer.
- In the style tag, we have selected the header div and set the position to “sticky”. If we set the sticky position, we should use the CSS “top” property. So, here we set the “top” property to “0px” which means when the top property is equal to 0px Header will be sticky.
- See the above output, The header is sticky even when I drop the scrollbar all the way down. So this value is mostly used in the header menu, navigation menu, etc
