A weblapok tervezése során a legfontosabb az elemek megfelelő elhelyezése. Ez egyszerűen megtehető a Tailwind „pozíció” osztályok használatával. A pozicionálás többféle lehet, ezek közül az egyik statikus.
Ez a blog bemutatja az elem statikus elhelyezését.
Hogyan lehet statikusan elhelyezni egy elemet a DOM-ban – Tailwind?
Egy elem statikusan pozícionálható a ' statikus ” pozíció osztálya. A statikus pozíció a HTML-elemek alapértelmezett pozíciója. Az elemek a következővel: pozíció: statikus ” az oldal normál menete alapján vannak elhelyezve, CSS-stílus nélkül.
Szintaxis
Az alkalmazás szintaxisa statikus ” osztály a következő:
Itt az elem bármely címke lehet, amelyre pozícióattribútumot lehet alkalmazni.
Tekintse meg a kódot a statikus pozicionálás gyakorlati megvalósításához:
< test osztály = 'szövegközpont' >< központ >
< h1 osztály = 'text-green-600 text-5xl font-bold' >
Példa statikus pozícióra
< / h1 >
< b >Tailwind CSS Position Class< / b >
< div osztály = 'static text-bal p-2 m-2 bg-green-200 h-48' >
< p osztály = 'félkövér betűtípus' >Statikusan pozicionált< / p >
< div >Abszolút pozicionált elem< / p >
< / div >
< / div >
< / központ >
< / test >
Ebben a kódban:
- ' szövegközpont ” a címkék tartalmát a képernyő közepére állítja.
- Állítsa be a „ ' címkét zöldre állítja a ' szöveg-zöld-600 ”, a szöveg méretét ötszörösére állítja a „ szöveg-5×1 ' és a betűtípust a ' font-félkövér ”.
- Kettő ' ' elemek is létrejönnek, és beállítják a statikus bal oldali pozíciót az első ' div ' használni a ' statikus szöveg-bal ”.
- Osztályok hozzárendelése p-2 ', ' m-2 ', ' bg-green-200 ', ' h-48 ” a második div-hez, és állítsa be a pozícióját abszolút balra lent a „ relatív alsó-0 bal-0 ' osztály.
Kimenet
Mentse el a fenti kódot a fájlba, és tekintse meg az általa létrehozott weboldal előnézetét, amely így fog megjelenni:
A statikusan elhelyezett elem a normál oldalfolyammal mozog, míg a másik elem megtartja abszolút pozícióját.
Következtetés
Egy elem statikus elhelyezéséhez a DOM-ban a dokumentum normál menetével használja a „ statikus 'A hátszél osztálya' pozíció ' hasznosság. Ez a blog megmutatta, hogyan kell elhelyezni bármely elemet ' statikusan ” egyszerű gyakorlati bemutatóval.