dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Coordonatele de poziționare inset-0, top-, right-, bottom- și left- în Tailwind CSS

Layout, Box Model și Poziționare Toate versiunile Tailwind Q&A / Distribuie cod

Coordonate fizice de ancorare pentru elementele absolute, fixe sau sticky (top, right, bottom, left).

Sintaxă 
inset-0 | top-0 right-0 | bottom-4 left-4

Poziționarea prin coordonate în Tailwind

Pentru elementele cu poziționare absolute, fixed sau relative, clasele de decalare stabilesc distanța față de marginile containerului de referință. Clasa inset-0 este o prescurtare extrem de populară ce setează simultan top: 0; right: 0; bottom: 0; left: 0;, întinzând elementul pe toată suprafața părintelui (ideal pentru fundaluri întunecate de modale – backdrops).

Exemplu Concret: Fundal întunecat pentru o fereastră modală
<div class="fixed inset-0 bg-black/50 z-40"></div>
<div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white p-6 rounded-xl shadow-2xl">
  Fereastră Dialog Centrată
</div>

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Coordonatele de poziționare inset-0, top-, right-, bottom- și left-

Ai o nelămurire despre utilizarea comenzii Coordonatele de poziționare inset-0, top-, right-, bottom- și left- sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.