El més important a l'hora de dissenyar pàgines web és la correcta posició dels elements. Això es pot fer fàcilment utilitzant les classes de 'posició' de Tailwind. El posicionament pot ser de diferents tipus, un d'ells és estàtic.

Aquest bloc mostrarà com posicionar estàticament l'element.

Com col·locar estàticament un element a DOM - Tailwind?

Un element es pot posicionar estàticament utilitzant el ' estàtica ” classe de posició. La posició estàtica és la posició predeterminada per als elements HTML. Els elements amb ' posició: estàtica ” es col·loquen segons el flux normal de la pàgina, sense cap estil CSS.

Sintaxi
La sintaxi per aplicar “ estàtica ”la classe és:

Aquí, l'element pot ser qualsevol etiqueta a la qual es pugui aplicar un atribut de posició.

Visiteu el codi per a la implementació pràctica del posicionament estàtic:

En aquest codi:

• “ centre de text ” ajusta el contingut de les etiquetes al centre de la pantalla.
• Estableix el '

  ” etiqueta a verd amb el “ text-verd-600 ”, la mida del text s'estableix en cinc vegades per “ text-5×1 ” i el tipus de lletra s'emfatitza amb el “ font-negreta ”.

• Dos '
  ' també es creen elements i estableixen la posició estàtica del costat esquerre per al primer ' div ' utilitzant el ' text estàtic-esquerra ”.
• Assigna les classes de ' p-2 ”, “ m-2 ”, “ bg-verd-200 ”, “ h-48 ” per a la segona div i també establiu la seva posició a la part inferior esquerra absoluta amb el “ inferior relatiu-0 esquerre-0 ” classe.

Sortida
Deseu el codi anterior al fitxer i previsualitzeu la pàgina web creada per aquest, que es mostrarà com a:

L'element situat estàticament es mou amb el flux de pàgina normal mentre que l'altre element conserva la seva posició absoluta.

Conclusió

Per col·locar un element de manera estàtica al DOM amb el flux normal del document, utilitzeu el ' estàtica 'classe del vent de cua' posició ” utilitat. Aquest bloc ha mostrat com posicionar qualsevol element ' estàticament ” amb una senzilla demostració pràctica.