Het belangrijkste bij het ontwerpen van webpagina's is de juiste positionering van elementen. Dit kan eenvoudig worden gedaan door Tailwind “positie” -klassen te gebruiken. De positionering kan van verschillende typen zijn, waarvan er één statisch is.
In deze blog wordt gedemonstreerd hoe u het element statisch kunt positioneren.
Hoe een element statisch te positioneren in DOM – Tailwind?
Een element kan statisch worden gepositioneerd met behulp van de “ statisch ’ klasse van positie. De statische positie is de standaardpositie voor HTML-elementen. De elementen met “ positie: statisch ” zijn gepositioneerd op basis van de normale stroom van de pagina, zonder enige CSS-stijl.
Syntaxis
De syntaxis voor het toepassen van “ statisch ” klasse is:
Hier kan het element elke tag zijn waarop een positieattribuut kan worden toegepast.
Bezoek de code voor praktische implementatie van statische positionering:
< lichaam klas = 'tekstcentrum' >< centrum >
< h1 klas = 'tekst-groen-600 tekst-5xl lettertype-bold' >
Voorbeeld van statische positie
< / h1 >
< B >Tailwind CSS-positieklasse< / B >
< div klas = 'statische tekst-links p-2 m-2 bg-groen-200 h-48' >
< P klas = 'Lettertype vetgedrukt' >Statisch gepositioneerd< / P >
< div >Absoluut gepositioneerd element< / P >
< / div >
< / div >
< / centrum >
< / lichaam >
In deze code:
- “ tekst-centrum ”past de inhoud van de -tags aan naar het midden van het scherm.
- Stel de ' ' tag naar groen met behulp van de ' tekst-groen-600 ”, wordt de tekstgrootte vijf keer ingesteld door “ tekst-5×1 ' en het lettertype wordt benadrukt met de ' Lettertype vetgedrukt ”.
- Twee ' Er worden ook elementen gemaakt en deze bepalen de statische positie aan de linkerkant voor de eerste “ div ' de ... gebruiken ' statische tekst-links ”.
- Wijs de klassen toe van “ p-2 ', ' m-2 ', ' bg-groen-200 ', ' u-48 ” voor de tweede div en stel ook de positie ervan in op absoluut linksonder met behulp van de “ relatief onder-0 links-0 ' klas.
Uitvoer
Sla de bovenstaande code op in het bestand en bekijk een voorbeeld van de webpagina die erdoor is gemaakt, die wordt weergegeven als:
Het statisch gepositioneerde element beweegt mee met de normale paginastroom, terwijl het andere element zijn absolute positie behoudt.
Conclusie
Om een element statisch in de DOM te positioneren met de normale stroom van het document, gebruikt u de “ statisch ”klasse van de Tailwind” positie ' nutsvoorziening. Deze blog heeft laten zien hoe je elk element kunt positioneren “ statisch ” met een eenvoudige praktijkdemonstratie.