La chose la plus importante lors de la conception de pages Web est le bon positionnement des éléments. Cela peut être fait facilement en utilisant les classes de « position » Tailwind. Le positionnement peut être de différents types, l'un d'eux étant statique.
Ce blog montrera comment positionner statiquement l'élément.
Comment positionner statiquement un élément dans DOM – Tailwind ?
Un élément peut être positionné statiquement à l'aide du ' statique » classe de poste. La position statique est la position par défaut des éléments HTML. Les éléments avec « position : statique » sont positionnés en fonction du flux normal de la page, sans aucun style CSS.
Syntaxe
La syntaxe pour appliquer « statique ' La classe est :
<élément classe = 'statique' > ... < / élément>
Ici, l'élément peut être n'importe quelle balise à laquelle un attribut de position peut être appliqué.
Consultez le code pour une implémentation pratique du positionnement statique :
< corps classe = 'centre de texte' >< centre >
< h1 classe = 'texte-vert-600 texte-5xl police-gras' >
Exemple de position statique
< / h1 >
< b >Classe de position CSS Tailwind< / b >
< div classe = 'texte statique-gauche p-2 m-2 bg-green-200 h-48' >
< p classe = 'Caractères gras' >Positionné statiquement< / p >
< div >Élément positionné en absolu< / p >
< / div >
< / div >
< / centre >
< / corps >
Dans ce code :
- ' centre de texte » ajuste le contenu des balises au centre de l'écran.
- Met le ' ' tag au vert en utilisant le ' texte-vert-600 ', la taille du texte est réglée à cinq fois par ' texte-5×1 ' et la police est soulignée à l'aide du ' Caractères gras ».
- Deux ' ' Des éléments sont également créés et définissent la position statique à gauche pour le premier ' div ' en utilisant le ' texte statique à gauche ».
- Attribuez les classes de « p-2 ', ' m-2 ', ' bg-vert-200 ', ' h-48 ' pour le deuxième div et définissez également sa position en bas à gauche absolue à l'aide du ' relatif en bas-0 gauche-0 ' classe.
Sortir
Enregistrez le code ci-dessus dans le fichier et prévisualisez la page Web créée par celui-ci qui s'affichera comme :
L'élément positionné statiquement se déplace avec le flux normal de la page tandis que l'autre élément conserve sa position absolue.
Conclusion
Pour positionner un élément de manière statique dans le DOM avec le flux normal du document, utilisez le ' statique « classe du Tailwind » position ' utilitaire. Ce blog a montré comment positionner n'importe quel élément ' statiquement » avec une simple démonstration pratique.