La cosa più importante durante la progettazione di pagine web è il corretto posizionamento degli elementi. Questo può essere fatto facilmente utilizzando le classi di “posizione” Tailwind. Il posizionamento può essere di diverso tipo uno dei quali è statico.
Questo blog dimostrerà come posizionare staticamente l'elemento.
Come posizionare staticamente un elemento nel DOM – Tailwind?
Un elemento può essere posizionato staticamente utilizzando il comando “ statico 'classe di posizione. La posizione statica è la posizione predefinita per gli elementi HTML. Gli elementi con “ posizione: statica ” vengono posizionati in base al normale flusso della pagina, senza alcuno stile CSS.
Sintassi
La sintassi per applicare “ statico 'la classe è:
In questo caso l'elemento può essere qualsiasi tag a cui può essere applicato un attributo di posizione.
Visita il codice per l'implementazione pratica del posizionamento statico:
< corpo classe = 'centro testo' >< centro >
< h1 classe = 'testo-verde-600 testo-5xl carattere-grassetto' >
Esempio di posizione statica
< / h1 >
< B >Classe di posizione CSS Tailwind< / B >
< div classe = 'testo statico-sinistra p-2 m-2 bg-verde-200 h-48' >
< P classe = 'carattere in grassetto' >Posizionato staticamente< / P >
< div >Elemento posizionato assoluto< / P >
< / div >
< / div >
< / centro >
< / corpo >
In questo codice:
- “ centro-testo ' regola il contenuto dei tag al centro dello schermo.
- Impostare il ' ' tag in verde utilizzando il ' testo-verde-600 ', la dimensione del testo è impostata su cinque volte da ' testo-5×1 ' e il carattere viene enfatizzato utilizzando ' carattere-grassetto ”.
- Due ' Vengono creati anche gli elementi ' e viene impostata la posizione statica del lato sinistro per il primo ' div ' usando il ' testo statico a sinistra ”.
- Assegnare le classi di “ p-2 ', ' m-2 ', ' bg-verde-200 ', ' h-48 ' per il secondo div e imposta anche la sua posizione su assoluto in basso a sinistra utilizzando ' relativo in basso-0 a sinistra-0 ' classe.
Produzione
Salva il codice sopra nel file e visualizza in anteprima la pagina web creata da esso che verrà visualizzata come:
L'elemento posizionato staticamente si sposta con il normale flusso della pagina mentre l'altro elemento mantiene la sua posizione assoluta.
Conclusione
Per posizionare staticamente un elemento nel DOM con il normale flusso del documento, utilizzare il comando ' statico “classe del Tailwind” posizione ' utilità. Questo blog ha mostrato come posizionare qualsiasi elemento “ staticamente ” con una semplice dimostrazione pratica.