Le positionnement CSS avec la propriété position
La propriété position définit la manière dont un élément est positionné dans le document. Elle accepte cinq valeurs : static, relative, absolute, fixed et sticky. Combinée aux propriétés de décalage (top, right, bottom, left), elle permet un contrôle précis de l'emplacement des éléments.
Rôle du positionnement
- Résoudre les problèmes de superposition entre éléments (les éléments positionnés ont une priorité d'affichage supérieure).
- Maintenir un élément fixe à un endroit précis de l'écran.
Tableau récapitulatif des valeurs
| Valeur | Description | Référence de déplacement | Dans le flux normal ? | Quitte son emplacement ? | Conserve sa place ? | Affecte les autres ? | Décalages utilisables ? |
|---|---|---|---|---|---|---|---|
static (défaut) |
Positionnement standard dans le flux normal. Les propriétés de décalage sont ignorées. | — | Oui | Non | Oui | Non | Non |
relative |
Déplacement par rapport à la position d'origine dans le flux. L'emplacement initial est conservé. | Position d'origine | Oui | Non | Oui | Non | Oui |
absolute |
Positionnement par rapport à l'ancêtre positionné le plus proche. L'élément quitte le flux. | Ancêtre positionné le plus proche | Non | Oui | Non | Non | Oui |
fixed |
Positionnement par rapport au viewport. Reste fixe lors du défilement. | Viewport | Non | Oui | Non | Non | Oui |
sticky |
Comportement hybride : relatif puis fixe lorsqu'un seuil de défilement est atteint. | Dépend du seuil | Oui avant seuil | Non | Oui | Non | Oui |
Principe « enfant absolu, parent relatif »
Le modèle le plus courant consiste à définir le parenet en relative et l'enfant en absolute. Le parent conserve sa place dans le flux tout en servant de contexte de positionnement pour l'enfant. L'enfant, sorti du flux, peut être placé précisément à l'intérieur du parent.
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.wrapper {
position: relative;
width: 320px;
height: 220px;
background: #4caf50;
overflow: hidden;
}
.popup {
position: absolute;
top: 30px;
left: 30px;
width: 120px;
height: 120px;
background: #fff9c4;
padding: 12px;
}
.placeholder {
width: 120px;
height: 60px;
background: #81d4fa;
margin: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="popup">Élément absolument positionné</div>
<div class="placeholder">Bloc standard</div>
</div>
</body>
</html>
Centrage horizontal et vertical avec absolute + transform
<style>
.centered-box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background: #e91e63;
}
</style>
Avec left: 50% et top: 50%, le coin supérieur gauche de l'élément se place au centre du référent. La fonction translate(-50%, -50%) corrige ensuite le décalage en replaçant l'élément de moitié de sa propre largeur et hauteur vers la gauche et le haut, obtenant ainsi un véritable centrage. L'avantage de cette méthode est qu'elle reste valable même si les dimensions de l'élément changent.
Différence entre top et margin-top en positionnement absolu
top est une propriété de positionnement qui déplace la boîte complète (margin + border + padding + content) par rapport au parent positionné. margin-top définit l'espace extérieur de l'élément mais ne modifie pas la position de référence établie par top. En positionnement absolu, il est préférable d'utiliser top plutôt que de mélanger avec margin-top.
Propriétés de typographie
font-size
Définit la taille du texte. La valeur par défaut dans Chrome est de 16px. L'unité px est obligatoire.
font-weight
Contrôle l'épaisseur de la police. normal (400) et bold (700) sont les plus courants. Les valeurs numériques vont de 100 à 900, mais toutes les polices ne proposent pas chaque niveau.
font-style
normal: style normal (par défaut)italic: texte en italique
font-family
Spécifie la famille de police. On peut déclarer plusieurs polices séparées par des virgules ; le navigateur utilise la première disponible. Les noms contenant des espaces doivent être entre guillemets. Il est recommandé de terminer la liste par une famille générique (serif, sans-serif, monospace).
.content {
font-family: "Segoe UI", Arial, sans-serif;
}
color
Définit la couleur du texte. Exemple : color: #e92322;
text-indent
Indente la première ligne d'un paragraphe. L'unité em est recommandée car elle est relative à la taille de police courante (1em = un caractère).
p { text-indent: 2em; }
text-align
Contrôle l'alignement horizontal du contenu (texte et éléments inline) à l'intérieur d'un conteneur bloc.
left(défaut),right,center,justifystart/end: selon le sens d'écriture
text-decoration
underline: soulignéline-through: barréoverline: surlignénone: aucun (utilisé pour retirer le soulignement des liens)
line-height
Définit la hauteur de ligne. Pour centrer verticalement un texte sur une ligne, on règle line-height à la hauteur du conteneur.
.btn {
height: 60px;
line-height: 60px;
text-align: center;
}
Propriété raccourcie font
Syntaxe : font: [style] [weight] size[/line-height] family;
p {
font: italic 700 35px/1.5 "Georgia", serif;
}
text-shadow
Ajoute une ombre au texte. Paramètres : décalage horizontal, décalage vertical, flou (optionnel), couleur (optionnelle). Plusieurs ombres sont possibles, séparées par des virgules.
Propriétés d'arrière-plan
background-color
Couleur de fond. La valeur par défaut est transparent.
background-image
.hero { background-image: url('photo.jpg'); }
background-repeat
| Valeur | Effet |
|---|---|
repeat |
Répétition horizontale et verticale (défaut) |
repeat-x |
Répétition horizontale uniquement |
repeat-y |
Répétition verticale uniquement |
no-repeat |
Aucune répétition |
space |
Répétition avec espacement uniforme, sans découpage |
round |
Répétition avec redimensionnement pour remplir parfaitement |
background-position
Position de départ de l'image de fond. Accepte des mots-clés (top, center, bottom, left, right), des valeurs en px ou des pourcentages.
.card { background-position: 50px 100px; }
background-size
| Valeur | Effet |
|---|---|
auto |
Taille d'origine (défaut) |
cover |
Couverture totale du conteneur, rognage possible |
contain |
Image entière visible, marges possibles |
| Valeurs en px ou % | Dimension explicite |
Propriété raccourcie background
.banner {
background: #333 url('bg.jpg') no-repeat center / cover;
}
La syntaxe utilise / pour séparer background-position et background-size. Cette séparation est nécessaire car ces deux propriétés acceptent chacune une ou deux valeurs, ce qui rendrait la distinction impossible sans délimiteur.
Mode d'affichage avec display
Bloc (display: block)
Occupe toute la largeur du parent, commence sur une nouvelle ligne. La largeur par défaut est auto (remplit le conteneur parent), la hauteur par défaut est déterminée par le contenu. On peut définir explicitement width et height. Les marges et espacements fonctionnent dans toutes les directions.
Exemples de balises bloc : <div>, <p>, <h1>–<h6>, <section>, <form>.
Inline (display: inline)
Ne commence pas de nouvelle ligne, occupe uniquement la largeur du contenu. Les propriétés width et height sont ignorées. Les marges et espacements horizontaux sont effectifs ; les verticaux n'affectent pas la mise en page.
Exemples : <span>, <a>, <strong>, <em>.
Inline-block (display: inline-block)
Combine les avantages : placement en ligne comme un élément inline, mais avec la possibilité de définir des dimensions comme un bloc. Les marges et espacements fonctionnent dans toutes les directions.
Masquage avec display: none
Retire complètement l'élément du rendu : invisible, sans espace réservé, non interactif. Les autres éléments comblent l'espace libéré. À distinguer de visibility: hidden qui masque visuellement mais conserve l'espace, et opacity: 0 qui rend transparent mais garde l'interactivité.
Alignement vertical avec vertical-align
La ligne de base (baseline) est la ligne invisible sur laquelle reposent les caractères. Par défaut, les éléments inline et inline-block s'alignent sur cette ligne de base, ce qui crée souvent un espace sous les images car la ligne de base laisse de la place pour les descendantes des lettres comme « g », « p », « y ».
vertical-align contrôle l'alignement vertical des éléments inline et des cellules de tableau. Valeurs principales : baseline (défaut), top, middle, bottom, text-top, text-bottom.
img { vertical-align: middle; } /* Élimine l'espace sous l'image */
Gestion du retour à la ligne
white-space
| Valeur | Comportement |
|---|---|
normal |
Fusionne les espaces, retour à la ligne automatique |
nowrap |
Pas de retour à la ligne |
pre |
Conserve les espaces et sauts de ligne |
pre-wrap |
Conserve les espaces, retour à la ligne automatique |
pre-line |
Fusionne les espaces, conserve les sauts de ligne |
overflow-wrap vs word-break
overflow-wrap: break-word essaie d'abord de préserver l'intégrité des mots et ne les coupe qu'en dernier recours. word-break: break-all est plus agressif : il coupe à n'importe quel caractère sans tenir compte de l'intégrité des mots. Si les deux sont définis simultanément, word-break: break-all domine car il modifie les règles de césure à un niveau plus fondamental.
text-overflow
clip: coupe simplement le texte (défaut)ellipsis: affiche des points de suspension « … »
Contexte d'empilement et z-index
Dans le flux normal, les éléments se superposent selon leur ordre d'apparition dans le HTML. Les éléments positionnés (absolute, fixed) se placent au-dessus des éléments en flux. La propriété z-index permet de contrôler l'ordre d'empilement des éléments positionnés.
Création d'un contexte d'empilement
Un contexte d'empilement est créé par :
- L'élément racine
<html> - Un élément avec
position: absolute/relativeet unz-indexnonauto - Un élément avec
position: fixed/sticky opacityinférieur à 1transform,filter,clip-pathnonnoneisolation: isolate
Le z-index n'a d'effet qu'au sein d'un même contexte d'empilement. Deux éléments dans des contextes différents ne peuvent pas être comparés directement.
<style>
.layer-a {
position: absolute;
top: 40px; left: 40px;
z-index: 2;
background: #81c784;
width: 180px; height: 180px;
}
.layer-b {
position: absolute;
top: 80px; left: 80px;
z-index: 1;
background: #e57373;
width: 180px; height: 180px;
}
</style>
Modèle de boîte : bordures, marges et espacements
border
Propriété raccourcie : border: width style color;
.frame { border: 2px solid #333; }
Variantes par côté : border-top, border-right, border-bottom, border-left.
Création d'un triangle avec des bordures :
.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid orange;
}
margin
Propriété raccourcie pour les marges extérieures. De 1 à 4 valeurs dans l'ordre : haut, droite, bas, gauche (sens horaire).
margin: 10px— les quatre côtésmargin: 10px 20px— haut/bas, gauche/droitemargin: 10px 20px 30px— haut, gauche/droite, basmargin: 10px 20px 30px 40px— haut, droite, bas, gauche
margin: 0 auto centre horizontalement un élément bloc de largeur définie.
padding
Même logique que margin pour les espacements internes entre le contenu et la bordure.
outline vs border
L'outline se dessine en dehors de la bordure sans occuper d'espace dans la mise en page. Il ne peut pas être défini par côté, ne supporte pas les bordures arrondies, et peut être décalé avec outline-offset. Son usage principal est l'indication de focus sur les éléments interactifs.
Représentation des couleurs
| Méthode | Syntaxe | Exemple |
|---|---|---|
| Mot-clé | Nom prédéfini | red |
| RGB | rgb(r, g, b) |
rgb(255, 0, 0) |
| RGBA | rgba(r, g, b, a) |
rgba(0, 0, 0, 0.5) |
| Hexadécimal | #rrggbb |
#e92322 |
En hexadécimal, si chaque paire est identique, on peut abréger : #ff0000 → #f00.
Flexbox : la boîte flexible
La propriété display: flex transforme un élément en conteneur flexible. Ses enfants directs deviennent des éléments flexibles (flex items).
Comportement par défaut
flex-direction: row— les items s'alignent horizontalement de gauche à droitejustify-content: flex-start— les items commencent au début de l'axe principalalign-items: stretch— les items s'étirent sur l'axe transversal
Axes principal et transversal
flex-direction |
Axe principal | Axe transversal |
|---|---|---|
row |
Horizontal (→) | Vertical (↓) |
row-reverse |
Horizontal (←) | Vertical (↓) |
column |
Vertical (↓) | Horizontal (→) |
column-reverse |
Vertical (↑) | Horizontal (→) |
Propriétés du conteneur
justify-content — alignement sur l'axe principal :
flex-start,center,flex-endspace-between: premier et dernier collés aux bords, espacement égal entre les autresspace-around: espacement égal autour de chaque itemspace-evenly: espacement identique partout, y compris aux extrémités
align-items — alignement sur l'axe transversal : flex-start, center, flex-end, stretch, baseline.
flex-wrap : nowrap (défaut), wrap, wrap-reverse.
gap : espacement entre les items. Un seule valeur pour tous les côtés, ou deux valeurs (lignes, colonnes).
Propriétés des items flexibles
order : modifie l'ordre d'affichage. Valeur par défaut 0 ; les valeurs plus petites apparaissent en premier.
flex-grow : facteur d'agrandissement. Par défaut 0 (pas d'agrandissement). Détermine comment l'espace restant est réparti proportionnellement.
flex-shrink : facteur de réduction. Par défaut 1 (réduction possible). À 0, l'item ne se réduit pas. Les dimensions width/height déclarées ne sont pas modifiées, mais la taille rendue peut différer.
flex-basis : taille initiale avant répartition de l'espace. Par défaut auto (basée sur le contenu ou width). Si défini, sa priorité est supérieure à width.
flex (raccourci) : flex: grow shrink basis;
| Écriture | Équivalent | Comportement |
|---|---|---|
flex: 1 |
1 1 0% |
Items de taille initiale nulle, répartissent équitablement l'espace |
flex: auto |
1 1 auto |
Items basés sur leur contenu, s'étirent et se réduisent |
flex: none |
0 0 auto |
Items à taille fixe, ni agrandissement ni réduction |
align-self : alignement individuel d'un item, remplaçant align-items du conteneur pour cet élément.
Exemple : barre de navigation horizontale centrée
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.menu-bar {
display: flex;
justify-content: center;
align-items: center;
background: #cfd8dc;
height: 80px;
}
.menu-list {
display: flex;
gap: 24px;
list-style: none;
background: #fff;
height: 56px;
align-items: center;
}
.menu-list a {
display: block;
width: 90px;
height: 44px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #333;
background: #a5d6a7;
border-radius: 4px;
}
.menu-list a:hover {
background: #2e7d32;
color: #fff;
}
</style>
</head>
<body>
<nav class="menu-bar">
<ul class="menu-list">
<li><a href="#">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Exemple : barre de navigation verticale centrée
<style>
.side-nav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #cfd8dc;
width: 120px;
min-height: 400px;
}
.side-nav ul {
display: flex;
flex-direction: column;
gap: 20px;
list-style: none;
align-items: center;
}
.side-nav a {
display: block;
width: 90px;
height: 50px;
line-height: 50px;
text-align: center;
text-decoration: none;
background: #a5d6a7;
color: #333;
border-radius: 4px;
}
.side-nav a:hover {
background: #2e7d32;
color: #fff;
}
</style>
Remarque sur les éléments inline dans un conteneur Flex
Un élément <a> (inline par défaut) placé dans un conteneur Flex est automatiquement traité comme un flex item et se comporte comme un inline-block : les propriétés width et height deviennent effectives sans modification explicite de display.
Prévention du débordement de contenu
Lorsqu'un flex item est trop compressé, son contenu peut déborder. Solutions :
flex-shrink: 0— empêche la compressionmin-width: 100px— impose une taille minimaleword-break: break-all— autorise la césure des mots longsoverflow: hidden— masque le débordement
Cascade des styles CSS
Le « C » de CSS signifie Cascading (en cascade). Si plusieurs règles affectent la même propriété d'un même élément, la dernière déclarée l'emporte (à priorité égale).
p {
color: red;
color: blue; /* Cette valeur s'applique */
}
Affichage tabulaire avec display: table
La valeur display: table permet de reproduire le comportement d'un tableau HTML sans utiliser la balise <table>. L'élément adapte sa largeur au contenu et peut être centré avec margin: 0 auto. Les enfants en display: table-cell supportent vertical-align.
Bordures arrondies
.rounded { border-radius: 8px; }