Det viktigste når du designer nettsider er riktig plassering av elementer. Dette kan enkelt gjøres ved å bruke Tailwind 'posisjon' klasser. Posisjoneringen kan være av forskjellige typer, en av dem er statisk.

Denne bloggen vil demonstrere hvordan du statisk plasserer elementet.

Hvordan statisk posisjonere et element i DOM – medvind?

Et element kan plasseres statisk ved å bruke ' statisk ' stillingsklasse. Den statiske posisjonen er standardposisjonen for HTML-elementer. Elementene med ' posisjon: statisk ” er plassert basert på den normale flyten på siden, uten noen CSS-styling.

Syntaks
Syntaksen for å bruke ' statisk klasse er:

Her kan elementet være en hvilken som helst tag som et posisjonsattributt kan brukes på.

Besøk koden for praktisk implementering av statisk posisjonering:

I denne koden:

• ' tekst-senter ” justerer innholdet i -taggene til midten av skjermen.
• Sett '

  ' taggen til grønn ved å bruke ' tekst-grønn-600 ', er tekststørrelsen satt til fem ganger av ' tekst-5×1 ' og skriften fremheves ved å bruke ' skrift med fet skrift '.

• to '
  '-elementer opprettes også og setter den statiske venstresiden for den første ' div ' bruker ' statisk tekst-venstre '.
• Tildel klassene til ' p-2 ', ' m-2 ', ' bg-grønn-200 ', ' h-48 ' for den andre div og sett også dens posisjon til absolutt nederst til venstre ved å bruke ' relativ nederst-0 venstre-0 ' klasse.

Produksjon
Lagre koden ovenfor i filen og forhåndsvis nettsiden som er opprettet av den, som vil vises som:

Det statisk plasserte elementet beveger seg med normal sideflyt mens det andre elementet beholder sin absolutte posisjon.

Konklusjon

For å plassere et element statisk i DOM med normal flyt av dokumentet, bruk ' statisk ' klasse av medvinden ' posisjon ' nytte. Denne bloggen har vist hvordan du plasserer ethvert element ' statisk ” med en enkel praktisk demonstrasjon.