Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <style> div.sticky { position: sticky; haut: 0; padding: 5px; couleur de fond: #cae8ca; bordure: 2px solide #4CAF50; } </style> </head> <body> <h2>Utiliser position: sticky;</h2> <p>Essayez de faire défiler cette page pour comprendre comment fonctionne le sticky.</p> <p>Ici, lorsque l'élément collant atteint le haut de la page (top: 0), il reste collé à cette position !</p> <div class="sticky">J'ai position sticky !</div> <div style="padding-bottom:2000px"> <p>Faites défiler vers le haut pour supprimer la collabilité !</p> <p>Certaines textes pour activer le défilement.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Certaines textes pour activer le défilement.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Certaines textes pour activer le défilement.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> </body> </html>