Veebilehtede kujundamisel on kõige olulisem elementide õige paigutus. Seda saab hõlpsasti teha, kasutades Tailwindi 'positsiooni' klasse. Positsioneerimine võib olla erinevat tüüpi, üks neist on staatiline.
See ajaveeb näitab, kuidas elementi staatiliselt positsioneerida.
Kuidas elementi staatiliselt positsioneerida DOM-is – Tailwindis?
Elemendi saab staatiliselt positsioneerida, kasutades ' staatiline ” positsiooniklass. Staatiline positsioon on HTML-i elementide vaikepositsioon. Elemendid, millel on ' asend: staatiline ” on positsioneeritud lehe tavapärase voo alusel, ilma CSS-stiilita.
Süntaks
Rakendamise süntaks staatiline ” klass on:
Siin võib elemendiks olla mis tahes silt, millele saab rakendada positsiooniatribuuti.
Staatilise positsioneerimise praktiliseks rakendamiseks vaadake koodi:
< keha klass = 'tekstikeskus' >< Keskus >
< h1 klass = 'text-green-600 text-5xl font-bold' >
Staatilise positsiooni näide
< / h1 >
< b >Tagatuule CSS-i asukohaklass< / b >
< div klass = 'staatiline tekst-vasak p-2 m-2 bg-roheline-200 h-48' >
< lk klass = 'paks kirjas' >Staatiliselt positsioneeritud< / lk >
< div >Absoluutselt positsioneeritud element< / lk >
< / div >
< / div >
< / Keskus >
< / keha >
Selles koodis:
- “ tekstikeskus ” kohandab siltide sisu ekraani keskele.
- Määra ' sildista roheliseks, kasutades nuppu tekst-roheline-600 ”, teksti suuruseks on määratud viis korda tekst-5 × 1 ' ja fonti rõhutatakse kasutades ' font-paks ”.
- kaks' ' elemendid luuakse ka ja määratakse esimesele ' staatiline vasakpoolne asend div ' kasutades ' staatiline tekst - vasakul ”.
- Määrake klassid ' p-2 ', ' m-2 ', ' bg-roheline-200 ', ' h-48 ' teise div jaoks ja määrake selle positsioon absoluutselt all vasakule, kasutades ' suhteline alumine-0 vasak-0 ” klass.
Väljund
Salvestage ülaltoodud kood faili ja vaadake selle loodud veebilehte, mis kuvatakse järgmiselt:
Staatiliselt paigutatud element liigub tavalise lehevooluga, samal ajal kui teine element säilitab oma absoluutse positsiooni.
Järeldus
Elemendi positsioneerimiseks DOM-is staatiliselt dokumendi normaalse vooluga kasutage nuppu ' staatiline 'Taattuule klass' positsiooni ” utiliit. See ajaveeb on näidanud, kuidas mis tahes elementi positsioneerida ' staatiliselt ” lihtsa praktilise demonstratsiooniga.