Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> ul { height: 150px; overflow: auto; position: relative; background-color: #cccccc; padding: 0; } ul li { list-style-type: none; height: 30px; padding: 10px 10px 0; } ul li:first-child { position: -webkit-sticky; position: sticky; top: 1px; background-color: #dddddd; } </style> </head> <body> <h2>Example of the position property with the "sticky" value:</h2> <ul> <li>Sticky List Item</li> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> <li>List Item 5</li> <li>List Item 6</li> <li>List Item 7</li> <li>List Item 8</li> <li>List Item 9</li> </ul> </body> </html>