Le positionnement en CSS — Correction d'exercices

Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.

#1 — Position Relative

Déplace un élément de 20px vers le bas par rapport à sa position normale sans affecter les autres.

Voir le corrigé

.box {
    position: relative;
    top: 20px;
}

Place un élément précisément dans le coin supérieur droit de son parent positionné.

Voir le corrigé

.child {
    position: absolute;
    top: 0;
    right: 0;
}

Crée une barre de navigation qui reste bloquée en haut de l'écran lors du défilement.

Voir le corrigé

nav {
    position: fixed;
    top: 0;
    width: 100%;
}

Fais en sorte qu'un élément passe au-dessus des autres (niveau d'empilement).

Voir le corrigé

.on-top {
    position: relative; /* nécessaire pour le z-index */
    z-index: 10;
}

Applique une position 'collante' qui s'arrête en haut au scroll pour les titres <h2>.

Voir le corrigé

h2 {
    position: sticky;
    top: 0;
    background: white;
}