Position Absolute
Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications et à l’exercice.
Étape 2 : Ajout de la position absolute
Ajoutons cette règle CSS à la fin du CSS
[la cascade impose « celui qui parle en dernier outrepasse les règles précédentes »].
.child3 {
position: absolute;
top: 20px;
left: 50px;
background-color: #ff9999;
}Résultat après modification
- Bloc 3 est maintenant déplacé à 20px du haut et 50px de la gauche.
- Bloc 1 et Bloc 2 restent à leur place d’origine dans le flux naturel.
- Bloc 3 est retiré du flux naturel : il ne réserve plus d’espace, ce qui fait que Bloc 1 et Bloc 2 se comportent comme s’il n’existait pas.
Explication : pourquoi cela se produit-il ?
Par défaut, un élément avec position: absolute est positionné par rapport au premier ancêtre positionné (c’est-à-dire un parent ayant une position définie comme relative, absolute, fixed, ou sticky).
Si aucun ancêtre positionné n’existe, il sera positionné par rapport à l’élément racine (<html> ou <body>).
Position absolute :
La propriété position: absolute retire Bloc 3 du flux naturel de la page.
Cela signifie que Bloc 3 est libre de se positionner n’importe où sans affecter les autres éléments.
Propriétés top et left :
La règle top: 20px; left: 50px; place Bloc 3 à 20px du haut et 50px de la gauche de la page.
Fixed vs Absolute ?
A ce stade comprendre la différence entre Fixed et Absolute n’est pas évident. Explorons cette différence dans le prochain chapitre.