Det vigtigste ved design af websider er den korrekte placering af elementer. Dette kan nemt gøres ved at bruge Tailwind 'position' klasser. Positioneringen kan være af forskellige typer, en af ​​dem er statisk.

Denne blog vil demonstrere, hvordan man statisk placerer elementet.

Hvordan placeres et element statisk i DOM - medvind?

Et element kan placeres statisk ved hjælp af ' statisk ” stillingsklasse. Den statiske position er standardpositionen for HTML-elementer. Elementerne med ' position: statisk ” er placeret baseret på det normale flow på siden uden nogen CSS-styling.

Syntaks
Syntaksen for at anvende ' statisk klasse er:

Her kan elementet være et hvilket som helst tag, som en positionsattribut kan anvendes på.

Besøg koden for praktisk implementering af statisk positionering:

I denne kode:

• “ tekst-center ” justerer indholdet af -tags til midten af ​​skærmen.
• Indstil '

  ' tag til grøn ved hjælp af ' tekst-grøn-600 ', er tekststørrelsen indstillet til fem gange af ' tekst-5×1 ', og skrifttypen fremhæves ved at bruge ' skrifttype-fed ”.

• to'
  ' elementer oprettes også og indstiller den statiske venstresideposition for den første ' div ' bruger ' statisk tekst-venstre ”.
• Tildel klasserne af ' p-2 ', ' m-2 ', ' bg-grøn-200 ', ' h-48 ' for den anden div og også indstil dens position til absolut nederst til venstre ved hjælp af ' relativ bund-0 venstre-0 ' klasse.

Produktion
Gem ovenstående kode i filen, og se et eksempel på den webside, der er oprettet af den, og som vises som:

Det statisk placerede element bevæger sig med det normale sideflow, mens det andet element bevarer sin absolutte position.

Konklusion

For at placere et element statisk i DOM med dokumentets normale flow, skal du bruge ' statisk ' klasse af medvinden ' position ' nytte. Denne blog har vist, hvordan man placerer ethvert element ' statisk ” med en simpel praktisk demonstration.