Das Wichtigste beim Entwerfen von Webseiten ist die richtige Positionierung der Elemente. Dies kann einfach durch die Verwendung von Tailwind-„Positions“-Klassen erreicht werden. Die Positionierung kann unterschiedlicher Art sein, eine davon ist statisch.
In diesem Blog wird gezeigt, wie das Element statisch positioniert wird.
Wie positioniere ich ein Element statisch im DOM – Tailwind?
Ein Element kann statisch positioniert werden mit dem „ statisch ”Klasse der Position. Die statische Position ist die Standardposition für HTML-Elemente. Die Elemente mit „ Position: statisch „ werden basierend auf dem normalen Seitenfluss ohne CSS-Stil positioniert.
Syntax
Die Syntax zum Anwenden von „ statisch „Klasse ist:
Dabei kann das Element ein beliebiges Tag sein, auf das ein Positionsattribut angewendet werden kann.
Besuchen Sie den Code für die praktische Implementierung der statischen Positionierung:
< Körper Klasse = „text-center“ >< Center >
< h1 Klasse = „text-green-600 text-5xl font-bold“ >
Beispiel für eine statische Position
< / h1 >
< B >Tailwind CSS-Positionsklasse< / B >
< div Klasse = „statischer Text-links p-2 m-2 bg-grün-200 h-48“ >
< P Klasse = 'fette Schriftart' >Statisch positioniert< / P >
< div >Absolut positioniertes Element< / P >
< / div >
< / div >
< / Center >
< / Körper >
In diesem Code:
- „ Text-Center „passt den Inhalt des -Tags an die Mitte des Bildschirms an.
- Stellen Sie „ ”-Tag auf Grün mit dem „ text-grün-600 “, wird die Textgröße durch „ auf das Fünffache festgelegt Text-5×1 “ und die Schriftart wird durch das „ fette Schriftart “.
- Zwei ' ”-Elemente werden ebenfalls erstellt und legen die statische linke Position für das erste fest. div ' Verwendung der ' statischer Text-links “.
- Ordnen Sie die Klassen „ S. 2 ',' m-2 ',' bg-grün-200 ',' h-48 ” für das zweite Div und setzen Sie dessen Position auch auf absolut unten links, indem Sie „ relativ unten-0 links-0 ' Klasse.
Ausgabe
Speichern Sie den obigen Code in der Datei und zeigen Sie eine Vorschau der damit erstellten Webseite an, die wie folgt angezeigt wird:
Das statisch positionierte Element bewegt sich mit dem normalen Seitenfluss, während das andere Element seine absolute Position behält.
Abschluss
Um ein Element statisch im DOM mit dem normalen Fluss des Dokuments zu positionieren, verwenden Sie „ statisch „Klasse des Rückenwinds“ Position ' Dienstprogramm. Dieser Blog hat gezeigt, wie man jedes Element positioniert. statisch ” mit einer einfachen praktischen Demonstration.