8.1 Flux normal
Le positionnement des éléments en CSS joue un rôle clé dans la gestion de leur placement et de leur interaction sur une page web. Il détermine comment les éléments sont disposés par rapport aux autres éléments et à leur conteneur. Examinons comment les différents types de positionnement impactent le flux des éléments.
Flux du document et positionnement
Les éléments dans le flux normal du document sont disposés l'un après l'autre dans l'ordre défini par le HTML. Les éléments de bloc
(comme <div>, <p>, <h1>) sont disposés verticalement,
occupant toute la largeur du conteneur parent, tandis que les éléments en ligne (comme <span>, <a>, <em>)
sont disposés horizontalement, occupant seulement l'espace nécessaire.
Exemple:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Élément de bloc</div>
<span class="inline">Élément en ligne</span>
<span class="inline">Élément en ligne</span>
8.2 Impact du positionnement sur le flux du document
Les différents types de positionnement peuvent modifier le flux standard du document. Voyons comment cela se produit :
Positionnement static
Le positionnement static est la valeur par défaut et ne change pas le flux normal du document. Les éléments
avec position: static sont disposés selon l'ordre défini dans le HTML.
Impact sur le flux :
- Les éléments restent dans le flux normal
- Les éléments sont disposés l'un après l'autre selon leur ordre dans le HTML
Positionnement relative
Les éléments avec position: relative restent dans le flux normal mais peuvent être décalés par rapport à leur
position normale à l'aide des propriétés top, right, bottom, left.
Le décalage n'affecte pas la position des autres éléments.
Impact sur le flux :
- Les éléments restent dans le flux normal
- Le décalage de l'élément ne modifie pas le placement des éléments voisins
Positionnement absolute
Les éléments avec position: absolute sont retirés du flux normal du document et sont placés par rapport à l'ancêtre
positionné le plus proche. S'il n'y a pas d'ancêtre positionné, ils sont placés par rapport au conteneur
initial (généralement <html> ou <body>).
Impact sur le flux :
- Les éléments sont retirés du flux normal
- Sont positionnés par rapport à l'ancêtre positionné le plus proche
- Les autres éléments se comportent comme si ces éléments n'existent pas
Positionnement fixed
Les éléments avec position: fixed sont retirés du flux normal et sont placés par rapport à la fenêtre du navigateur.
Ils restent en place lors du défilement de la page.
Impact sur le flux :
- Les éléments sont retirés du flux normal
- Sont positionnés par rapport à la fenêtre du navigateur
- Restent en place lors du défilement de la page
- Les autres éléments se comportent comme si ces éléments n'existent pas
Positionnement sticky
Les éléments avec position: sticky se comportent comme des éléments positionnés relativement jusqu'à ce qu'ils atteignent
un seuil de défilement défini, après quoi ils deviennent fixes.
Impact sur le flux :
- Les éléments restent dans le flux normal jusqu'à ce qu'ils atteignent le seuil de défilement
- Après avoir atteint le seuil, l'élément devient fixe et n'influence plus le flux normal
8.3 Exemples visuels de l'impact sur le flux
1. Exemple avec positionnement fixe :
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Élément fixe</div>
<div class="content">Contenu défilant
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. Exemple avec positionnement sticky :
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Élément sticky</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION