Fixed vs Absolute
Veuillez utiliser CodePen. Cliquez sur EDIT ON COPEPEN. Continuer la lecture pour accéder aux explications et à l’exercice.
Cas 1 : absolute
Ajoutez cette règle CSS à la fin du CSS
.child {
position: absolute;
bottom: 20px;
left: 20px;
}
Résultat :
- Le Bloc positionné est placé à 20px du bas et 20px de la gauche de la section parent.
- Son positionnement dépend de la section (car le parent
.sectionpossède uneposition: relative). [ne vous focaliser pas sur cette information pour l’instant] - Si vous défilez la page, le bloc défile avec son conteneur.
Cas 2 : fixed
Modifiez la règle CSS en :
.child {
position: fixed;
top: 20px;
left: 20px;
}
Résultat :
- Le Bloc positionné est fixé à 20px du haut et 20px de la gauche de la fenêtre du navigateur (viewport).
- Il ne bouge pas lorsque vous défilez la page.
Cas 3 : relation de absolute au parent
Modifier le parent :
.section {
background-color: #ddd;
width: 100%;
height: 400px;
margin: 20px auto;
border: 2px dashed black;
position: unset; /* ce parametre influe sur absolute de l'enfant */
}Résultat :
Le bloc se positionne en bas à gauche de l’élément grand-parent « .page »
Lorsque nous changeons position: relative de .section à unset, l’élément en absolute ne trouve plus de parent positionné pour calculer sa position. Il remonte alors au conteneur positionné le plus proche, ici .page. Si aucun conteneur n’a de position définie, il se positionnera par rapport à l’élément racine (<html> ou <body>). »
Modifier le grand parent :
.page {
background-color: #f0f0f0;
width: 100%;
max-width: 800px;
margin: 0 auto;
border: 2px solid black;
position: unset; /* grand parent position changed */
overflow: auto;
}Le « bloc positionné » se positionne à gauche en bas du viewport, c’est à dire le plus bas possible lors de l’affichage initial. Si on molette vers le bas, le « bloc positionné » n’est pas fixe et bouge avec le scroll.
Si on passe à :
.child {
position: fixed;
bottom: 20px;
left: 20px;
}Cette fois il est Fixe.
Le « bloc positionné » se positionne à gauche en bas du viewport, c’est à dire le plus bas possible lors de l’affichage initial. Si on molette vers le bas, le « bloc positionné » est fixe et ne bouge pas avec le scroll. CQFD.