Classes utilitaires pour contrôler le positionnement des éléments, leurs décalages (top, right, bottom, left),
les raccourcis inset, les transformations de centrage,
les niveaux de z-index et l'alignement vertical.
Élément .absolute dans un parent .relative, ancré en .top-0.right-0
Centrage avec .absolute.top-50.left-50.translate-middle
Centrage horizontal avec .absolute.left-50.translate-middle-x
| CLASSE | PROPRIÉTÉ APPLIQUÉE | DESCRIPTION |
|---|---|---|
.static |
position: static |
Comportement par défaut du navigateur. L'élément suit le flux normal. |
.relative |
position: relative |
L'élément reste dans le flux. Sert de référence pour les enfants en absolute. |
.absolute |
position: absolute |
L'élément est retiré du flux et positionné par rapport à son ancêtre positionné le plus proche. |
.fixed |
position: fixed |
L'élément est positionné par rapport à la fenêtre du navigateur. Il reste visible au scroll. |
.sticky |
position: sticky |
L'élément suit le flux jusqu'à atteindre un seuil de scroll, puis se fixe. |
Classes de décalage pour les propriétés top, right, bottom et left.
Disponibles en valeurs 0, 50% et 100%.
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.top-0 |
top: 0 |
.top-50 |
top: 50% |
.top-100 |
top: 100% |
.right-0 |
right: 0 |
.right-50 |
right: 50% |
.right-100 |
right: 100% |
.bottom-0 |
bottom: 0 |
.bottom-50 |
bottom: 50% |
.bottom-100 |
bottom: 100% |
.left-0 |
left: 0 |
.left-50 |
left: 50% |
.left-100 |
left: 100% |
Raccourcis pour couvrir simultanément plusieurs côtés d'un élément positionné.
| CLASSE | PROPRIÉTÉS APPLIQUÉES | DESCRIPTION |
|---|---|---|
.inset-0 |
top: 0; right: 0; bottom: 0; left: 0 |
Plaque l'élément sur les quatre côtés de son parent positionné. Utile pour les overlays. |
.inset-x-0 |
left: 0; right: 0 |
Étire l'élément sur toute la largeur de son parent positionné. |
.inset-y-0 |
top: 0; bottom: 0 |
Étire l'élément sur toute la hauteur de son parent positionné. |
Classes de transformation pour centrer un élément par rapport à son point d'ancrage. Se combinent avec les classes de décalage à 50%.
| CLASSE | PROPRIÉTÉ APPLIQUÉE | DESCRIPTION |
|---|---|---|
.translate-middle-x |
transform: translateX(-50%) |
Décale l'élément de -50% sur l'axe horizontal. À combiner avec .left-50 pour un centrage horizontal. |
.translate-middle-y |
transform: translateY(-50%) |
Décale l'élément de -50% sur l'axe vertical. À combiner avec .top-50 pour un centrage vertical. |
.translate-middle |
transform: translate(-50%, -50%) |
Décale l'élément de -50% sur les deux axes. À combiner avec .top-50.left-50 pour un centrage total. |
Combiner .translate-middle-x et
.translate-middle-y sur un même élément
applique transform: translate(-50%, -50%),
identique à .translate-middle.
Échelle de z-index prédéfinie de -1 à 9999.
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.z-auto |
z-index: auto |
.z-n1 |
z-index: -1 |
.z-0 |
z-index: 0 |
.z-10 |
z-index: 10 |
.z-20 |
z-index: 20 |
.z-30 |
z-index: 30 |
.z-40 |
z-index: 40 |
.z-50 |
z-index: 50 |
.z-60 |
z-index: 60 |
.z-70 |
z-index: 70 |
.z-80 |
z-index: 80 |
.z-90 |
z-index: 90 |
.z-100 |
z-index: 100 |
.z-max |
z-index: 9999 |
Le z-index n'a d'effet que sur les éléments dont la propriété
position est différente de
static.
Combiner .z-* avec
.relative, .absolute,
.fixed ou .sticky.
Classes utilitaires pour la propriété vertical-align. S'appliquent aux éléments inline, inline-block et aux cellules de tableau.
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.align-baseline |
vertical-align: baseline |
.align-top |
vertical-align: top |
.align-middle |
vertical-align: middle |
.align-bottom |
vertical-align: bottom |
.align-text-top |
vertical-align: text-top |
.align-text-bottom |
vertical-align: text-bottom |
Toujours poser .relative sur le parent
avant d'utiliser .absolute sur un enfant.
Sans ancêtre positionné, l'élément se positionne par rapport au viewport.
Pour centrer parfaitement un élément dans son parent, combiner
.absolute.top-50.left-50.translate-middle
sur l'enfant et .relative sur le parent.
Ne pas utiliser .inset-0 sans que le parent
ait une position autre que static et des dimensions
définies : l'élément ne couvrira pas la zone attendue.
Position · WEBDEV-UI DOCS / V1