Hal terpenting saat mendesain halaman web adalah penempatan elemen yang tepat. Hal ini dapat dilakukan dengan mudah menggunakan kelas “posisi” Tailwind. Penentuan posisinya bisa bermacam-macam, salah satunya statis.
Blog ini akan mendemonstrasikan cara memposisikan elemen secara statis.
Bagaimana Memposisikan Elemen Secara Statis di DOM – Tailwind?
Sebuah elemen dapat diposisikan secara statis menggunakan “ statis ” kelas posisi. Posisi statis adalah posisi default untuk elemen HTML. Elemen dengan “ posisi: statis ” diposisikan berdasarkan alur halaman normal, tanpa gaya CSS apa pun.
Sintaksis
Sintaks untuk menerapkan “ statis ”kelasnya adalah:
Di sini, elemen dapat berupa tag apa pun yang dapat diterapkan atribut posisi.
Kunjungi kode untuk implementasi praktis pemosisian statis:
< tubuh kelas = 'pusat teks' >< tengah >
< h1 kelas = 'teks-hijau-600 teks-5xl font-tebal' >
Contoh Posisi Statis
< / h1 >
< B >Kelas Posisi CSS Tailwind< / B >
< div kelas = 'teks statis-kiri p-2 m-2 bg-hijau-200 jam-48' >
< P kelas = 'font-tebal' >Diposisikan Secara Statis< / P >
< div >Elemen Posisi Mutlak< / P >
< / div >
< / div >
< / tengah >
< / tubuh >
Dalam kode ini:
- “ pusat teks ” menyesuaikan konten tag ke tengah layar.
- Mengatur ' ” tag menjadi hijau menggunakan “ teks-hijau-600 ”, ukuran teks diatur menjadi lima kali dengan “ teks-5×1 ” dan fontnya ditekankan menggunakan “ font-tebal ”.
- Dua “ ” elemen juga dibuat dan mengatur posisi sisi kiri statis untuk yang pertama “ div ' menggunakan ' teks statis-kiri ”.
- Tetapkan kelas “ hal-2 ', ' m-2 ', ' bg-hijau-200 ', ' h-48 ” untuk div kedua dan atur juga posisinya ke kiri bawah absolut menggunakan “ relatif bawah-0 kiri-0 ' kelas.
Keluaran
Simpan kode di atas dalam file dan pratinjau halaman web yang dibuatnya yang akan muncul sebagai:
Elemen yang diposisikan secara statis bergerak mengikuti aliran halaman normal sementara elemen lainnya mempertahankan posisi absolutnya.
Kesimpulan
Untuk memposisikan elemen secara statis di DOM dengan aliran dokumen normal, gunakan “ statis ”kelas Tailwind” posisi ' kegunaan. Blog ini telah menunjukkan cara memposisikan elemen apa pun “ secara statis ” dengan demonstrasi praktis sederhana.