What is Sticky Positioning in Cascading Style Sheet. Explain it. And write a HTML coding for it.

A stickily positioned element

is an element whose computed position value is sticky. It’s treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as “stuck” until meeting the opposite edge of its containing block.

 

LOOKS SO SUNDARRRR!!

 

 

Code:

 


<!DOCTYPE html>
<html>
<head>
<title>Sticky Positioning</title>
<style>
body
{
font-family: comic sans ms;
}
.fixedclass {

position: sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}

</style>
</head>
<body>
<p><b>Try to scroll inside this frame to understand how sticky 
positioning works</b></p>

<input type="button" class="fixedclass" value="Main Hu Chipkoooo!" />
<p>This is something very sticky, I hope you'll would like it. 
Well I loved this Stupendeous feature of the sticky positioning. 
I mean it was a great sense of humour and sarcasm to 
create such type of excillence</p>
<p>In this example, the sticky element sticks to the top of the page, 
when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling...</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>

</body>
</html>

 

Output:

Enjoy Coding!!!

 

Leave a Reply