Perkara yang paling penting semasa mereka bentuk halaman web ialah kedudukan elemen yang betul. Ini boleh dilakukan dengan mudah dengan menggunakan kelas 'kedudukan' Tailwind. Kedudukan boleh terdiri daripada pelbagai jenis salah satunya adalah statik.
Blog ini akan menunjukkan cara meletakkan elemen secara statik.
Bagaimana untuk Meletakkan Elemen secara Statik dalam DOM - Tailwind?
Satu elemen boleh diletakkan secara statik menggunakan ' statik ” kelas jawatan. Kedudukan statik ialah kedudukan lalai untuk elemen HTML. Unsur-unsur dengan “ kedudukan: statik ” diletakkan berdasarkan aliran biasa halaman, tanpa sebarang penggayaan CSS.
Sintaks
Sintaks untuk memohon ' statik 'kelas ialah:
Di sini, elemen boleh menjadi sebarang teg yang boleh digunakan atribut kedudukan.
Lawati kod untuk pelaksanaan praktikal kedudukan statik:
< badan kelas = 'pusat teks' >< pusat >
< h1 kelas = 'teks-hijau-600 teks-5xl font-bold' >
Contoh Kedudukan Statik
< / h1 >
< b >Kelas Kedudukan CSS Tailwind< / b >
< div kelas = 'teks statik-kiri p-2 m-2 bg-hijau-200 h-48' >
< hlm kelas = 'huruf tebal' >Kedudukan Statik< / hlm >
< div >Elemen Kedudukan Mutlak< / hlm >
< / div >
< / div >
< / pusat >
< / badan >
Dalam kod ini:
- “ pusat teks ” melaraskan kandungan tag ke tengah skrin.
- Menetapkan ' 'tag kepada hijau menggunakan ' teks-hijau-600 ”, saiz teks ditetapkan kepada lima kali oleh “ teks-5×1 ” dan fon ditekankan menggunakan “ huruf tebal ”.
- dua ' elemen ' juga dicipta dan menetapkan kedudukan sebelah kiri statik untuk ' pertama div ' menggunakan ' teks statik-kiri ”.
- Tetapkan kelas ' p-2 ',' m-2 ',' bg-hijau-200 ',' h-48 ” untuk div kedua dan juga tetapkan kedudukannya ke kiri bawah mutlak menggunakan “ bawah relatif-0 kiri-0 ” kelas.
Pengeluaran
Simpan kod di atas dalam fail dan pratonton halaman web yang dibuat olehnya yang akan dipaparkan sebagai:
Elemen kedudukan statik bergerak dengan aliran halaman biasa manakala elemen lain mengekalkan kedudukan mutlaknya.
Kesimpulan
Untuk meletakkan elemen secara statik dalam DOM dengan aliran biasa dokumen, gunakan ' statik 'kelas Tailwind' kedudukan ” utiliti. Blog ini telah menunjukkan cara meletakkan sebarang elemen “ secara statik ” dengan demonstrasi praktikal yang mudah.