Du positionnement CSS à Tailwind

position:absolute → absolute. Les côtés mappent vers top/right/bottom/left. z-index custom → arbitraire.

Le positionnement suit des règles simples : position:absolute donne absolute, et chaque décalage devient l’utilitaire de côté correspondant. Les valeurs de z-index hors échelle passent en notation arbitraire. Les vrais pièges sont ailleurs, du côté de sticky, du contexte d’empilement et des débordements masqués, à tester dans le navigateur.

position et offsets

position:absolute → absolute ; top/right/bottom/left vers inset-* ou top-* quand ça match l’échelle.

z-index

z-index courants → z-10 / z-50. Valeurs de marque rares → z-[…].

Sticky et stacking

sticky + overflow sur les ancêtres reste un piège classique : vérifiez le stacking context après conversion.

Essayer

Ouvrir le convertisseur

.example { display: flex; gap: 1rem; padding: 1rem; }

Note de confiance : vérifiez le rendu. Le convertisseur est une aide de brouillon.