Definition:
CSS position: sticky float an element with the user’s scroll and stick it into one position.
See an example below of using CSS position: sticky;
Syntax:
position: sticky;Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
width: 400px;
height: 80px;
overflow-y: scroll;
padding-left: 10px;
border: 3px solid #73AD21;
text-align:center;
}
.sticky {
position: sticky;
top: 0;
left: 0;
padding: 5px;
color: white;
background-color: black;
border: 3px solid red;
}
</style>
</head>
<body>
<h3>CSS position:sticky positioned in one places with mouse scrolling.</h3>
<div class="relative">I am an element with relative position
<div class="sticky">This paragraph sticks in top left position</div>
<p> The above paragraph has used position: sticky property and see the results with scrolling mouse up and down.</p></div>
</body>
</html>
Output:
CSS position:sticky positioned in one places with mouse scrolling.
I am an element with relative position
This paragraph sticks in top left position
The above paragraph has used position: sticky property and see the results with scrolling mouse up and down.
Scroll the above content to see the sticky elements.
You may be interested in the following topics:
- CSS Position relative
- CSS Position sticky
- CSS Position static
- CSS Position fixed
- CSS Position absolute
- CSS Position (All Properties)