La propriété display
Chaque élément HTML a un mode d'affichage par défaut :
block— prend toute la largeur, retour à la ligne (div,p,h1)inline— prend seulement la largeur du contenu, pas de retour à la ligne (span,a,strong)inline-block— comme inline mais on peut définir width/heightnone— l'élément disparaît complètement de la page
On peut changer le display de n'importe quel élément. Par exemple, transformer des <li> en inline-block pour créer un menu horizontal.
La propriété position
static— par défaut, l'élément suit le flux normal de la pagerelative— décalé par rapport à sa position normale (le flux est conservé)absolute— retiré du flux, positionné par rapport au parent le plus proche qui aposition: relativefixed— fixé par rapport à la fenêtre (reste en place au scroll)sticky— se comporte comme relative puis fixed au scroll
Les propriétés top, right, bottom, left n'ont d'effet que sur les éléments positionnés (pas static).
z-index : l'ordre de superposition
Quand des éléments se superposent, z-index définit l'ordre d'empilement. Un z-index plus élevé passe devant.
Attention : z-index ne fonctionne que sur les éléments positionnés (relative, absolute, fixed, sticky). Sur un élément static, il est ignoré.
Techniques de centrage
- Centrer du texte :
text-align: center - Centrer un bloc :
margin: 0 auto(l'élément doit avoir unewidth) - Centrer verticalement et horizontalement : on verra Flexbox dans la leçon suivante — c'est la méthode moderne
The display property
Every HTML element has a default display mode:
block— takes the full width, line break (div,p,h1)inline— takes only content width, no line break (span,a,strong)inline-block— like inline but you can set width/heightnone— the element disappears completely from the page
You can change any element's display. For example, turning <li> items into inline-block to create a horizontal menu.
The position property
static— default, element follows the normal page flowrelative— offset from its normal position (flow preserved)absolute— removed from flow, positioned relative to the closest parent withposition: relativefixed— fixed relative to the viewport (stays in place when scrolling)sticky— behaves like relative then fixed when scrolling
The properties top, right, bottom, left only work on positioned elements (not static).
z-index: stacking order
When elements overlap, z-index defines the stacking order. A higher z-index goes in front.
Warning: z-index only works on positioned elements (relative, absolute, fixed, sticky). On a static element, it's ignored.
Centering techniques
- Center text:
text-align: center - Center a block:
margin: 0 auto(the element must have awidth) - Center vertically and horizontally: we'll see Flexbox in the next lesson — it's the modern method
Copiez ce prompt dans Claude ou ChatGPT :
Montre-moi 5 exemples pratiques de position CSS (static, relative, absolute, fixed, sticky) avec un cas d'utilisation réel pour chacun.
L'IA a utilisé position: absolute sur un badge sans mettre position: relative sur le parent. Le badge est positionné par rapport à la page entière au lieu de la carte. Corrigez !
position: absolute se positionne par rapport à :