Plusieurs petits exercices consistant à tester les principes du positionnement adhérent sticky en CSS en reproduisant des modèles.
Pour rappel, le positionnement en adhérence ou sticky consiste à positionner un élément HTML de manière relative jusqu’à un seuil de défilement définit à partir duquel l’élément se positionne en fixe. Ce positionnement s’effectue avec les propriétés display
, top
, bottom
, left
et right
.
Deux points à retenir lorsqu’un élément est positionné en absolu :
- Le positionnement sticky démarre par rapport au seuil fourni.
- Le positionnement sticky s’effectue par rapport à la position du conteneur englobant.
Préparation de l’exercice
Créez un dossier racine à l’emplacement de votre choix.
Créez un fichier html intitulé position-css37.html avec la structure de base.
Afficher la solutionCréez un fichier css intitulé style.css et liez-le à la page position-css38.html.
Afficher la solutionExercice 1 : Bandeau de titre
HTML : Ajoutez suffisamment de contenu dans la page pour quelle puisse défiler. Pour cela, utiliser du lorem ipsum : Lorem Ipsum
HTML : Insérez deux éléments div
en haut de la page avec les classes site-img
et site-title
. Ajoutez le texte “Titre du site” dans le second élément site-title
.
CSS : Utilisez la classe site-img
pour dimensionner l’élément afin qu’il ait une hauteur de 300px.
CSS : Insérez une image en arrière-plan de l’élément site-img
en faisant en sorte qu’elle occupe tout le bloc.
CSS : Effectuez la mise en forme de l’élément site-title
afin qu’il corresponde au modèle ci-dessous. La couleur d’arrière-plan est opaque à 50%.
Testez le défilement de la page.
CSS : Positionnez l’élément site-title
afin qu’il soit en adhérence lorsqu’il est positionné à 0 du haut de la fenêtre.
Testez à nouveau le défilement de la page.
Prévisualiser(ouvre un nouvel onglet)
Exercice 2 : Liste d’articles
Créez une nouvelle page HTML à laquelle vous liez votre fichier css.
HTML : Insérez un conteneur principal de type article
contenant un titre de niveau 1 et une dizaine de paragraphes contenant chacun plusieurs lignes de Lorem Ipsum :
Lorem Ipsum. Vous devez avoir suffisamment de contenu pour que la page puisse défiler.
HTML : Dupliquez plusieurs fois l’élément article afin d’avoir plusieurs articles les uns à la suite des autres.
CSS : Mettez en forme les articles afin de bien les distinguer comme dans l’exemple ci-dessous :
CSS : Positionnez les titre afin d’obtenir un résulta identique à la démonstration suivante lors du défilement de la page.
Afficher la solution CSSExercice 3 : Relevé bancaire
Téléchargez la page HTML de base permettant d’effectuer l’exercice ci-dessous :
Observez-bien le code HTML fourni avant de reproduire la code CSS permettant d’obtenir le résultat de la démonstration ci-dessous lors du défilement de la page.
Afficher la solution CSSExercice 4 : Carré bleu
Créez une nouvelle page HTML à laquelle vous liez le fichier css.
HTML : Insérer le code HTML suivant dans votre page web.
<div class="container"> <div class="content"> </div> </div>
CSS : Effectuez la mise en place des deux éléments pour avoir l’élément container
beaucoup plus petit que l’élément content
. Gérez le débordement de container
pour afficher des poignées de scroll.
HTML : Insérez un élément HTML supplémentaire dans l’élément content
.
CSS : Transformez en petit carré de couleur (30x30px) l’élément que vous venez de rajouter.
Afficher la solution CSSCSS : Transformez content
en élément flexible afin de centrer le carré à l’intérieur verticalement et horizontalement.
CSS : Positionnez le carré pour obtenir le comportement illustré par la démonstration ci-dessous lors du scroll.
Afficher la solution CSSSauf mention contraire*, l'article Positionnement en adhérence (sticky) [CSS38] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.