| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>sticky</title> | |
| <style type="text/css"> | |
| div.sticky{ | |
| position: sticky; | |
| top: o; | |
| padding: 5px; | |
| background-color: aliceblue; | |
| border: 2px solid cornsilk; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>try to <b>scrooll</b> inside this frame to undertand how sticky positioning works</p> | |
| <div class="sticky"> im sticky</div> | |
| <div style="padding-bottom: 2000px"> | |
| <p>isajdijskfjsjfjofefoeofkekfkeokfeopkfokokkofkek</p> | |
| <p>wjojwdwkdwkdfkwkdkwfkekfkekfkefkekekfekkekfkefkk</p> | |
| <p>wjojwdwkdwkdfkwkdkwfkekfkekfkefkekekfekkekfkefkk</p> | |
| <p>akjdkjwkjkjfjejfejewmkpkq2krfwekfrewfrepwlpfeplppffpwpepfekffgghhthhthththttththhththhhhhhreghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhrthtrhrrhrhh</p> | |
| </div> | |
| </body> | |
| </html> |