Bootstrap - Position: Panduan Lengkap untuk Pemula

Hai teman-teman pemula pengembang web! Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membawa Anda dalam perjalanan melalui dunia pemosisian Bootstrap. Jangan khawatir jika Anda belum pernah menulis satu baris kode sebelumnya - kita akan mulai dari dasar dan naik tingkatannya. Jadi, ambil minuman favorit Anda, rajin duduk, dan mari kita masuk ke dalam!

Apa Itu Posisi Bootstrap?

Sebelum kita masuk ke detailnya, mari kita pahami apa yang dimaksud dengan "posisi" dalam Bootstrap. Posisi adalah tentang mengendalikan di mana elemen muncul di halaman web Anda. Itu seperti mengatur furnitur di dalam ruangan - Anda ingin segala sesuatu di tempat yang tepat!

Nilai Posisi

Dalam Bootstrap, kita memiliki beberapa nilai posisi yang bisa digunakan. Mari kita lihat mereka dalam tabel yang praktis:

Nilai Posisi	Deskripsi
static	Posisi default
relative	Posisi relatif terhadap posisi normalnya
absolute	Posisi relatif terhadap leluhur yang diposisikan terdekat
fixed	Posisi relatif terhadap jendela browser
sticky	Berganti antara relative dan fixed

Sekarang, mari kitauraikan ini dengan beberapa contoh.

Posisi Static

Ini adalah posisi default untuk semua elemen. Mari kita lihat contohnya:

<div class="position-static">
Saya adalah elemen statis!
</div>

Dalam kasus ini, div akan hanya berada di tempatnya secara alami di dalam aliran dokumen. Tidak ada hal khusus, tetapi ini penting untuk dipahami sebagai dasar kita.

Posisi Relative

Pemosisian relatif memungkinkan Anda memindahkan elemen relatif terhadap posisi normalnya. Berikut adalah cara kerjanya:

<div class="position-relative" style="top: 20px; left: 30px;">
Saya diposisikan secara relatif!
</div>

Div ini akan dipindahkan 20 pixel ke bawah dan 30 pixel ke kanan dari posisinya biasanya. Itu seperti mengatakan kepada hewan peliharaan Anda, "Pindahkan sedikit ke kiri, teman!"

Posisi Absolute

Pemosisian absolut sedikit lebih sulit. Itu menempatkan elemen relatif terhadap leluhur yang diposisikan terdekat. Jika tidak ada yang seperti itu, ia menggunakan tubuh dokumen. Mari kita lihat contohnya:

<div class="position-relative">
<div class="position-absolute" style="top: 0; right: 0;">
Saya diposisikan secara absolut di sudut kanan atas!
</div>
</div>

Dalam contoh ini, div dalam akan diposisikan di sudut kanan atas leluhurnya. Itu seperti catatan Sticky yang Anda bisa tempatkan di mana saja di papan buletin!

Posisi Fixed

Pemosisian fixed adalah seperti memberikan elemen sebuah tempat permanen di layar. Itu tetap tinggal bahkan saat Anda gulir. Berikut adalah cara Anda menggunakannya:

<div class="position-fixed" style="bottom: 0; right: 0;">
Saya tetap di sudut kanan bawah layar!
</div>

Div ini akan selalu terlihat di sudut kanan bawah jendela browser, tidak peduli berapa banyak Anda gulir. Itu sempurna untuk hal seperti tombol "Kembali ke Atas"!

Posisi Sticky

Posisi sticky adalah chameleon dari pemosisian. Itu berperilaku seperti relative sampai titik gulir tertentu, lalu menjadi fixed. Itu bagus untuk menu navigasi. Mari lihat contohnya:

<div class="position-sticky" style="top: 0;">
Saya akan tetap di atas saat Anda gulir ke bawah!
</div>

Div ini akan gulir secara normal dengan halaman sampai mencapai puncak viewport, lalu ia akan tetap di sana saat Anda terus gulir.

Mengatur Elemen

Sekarang kita mengerti nilai posisi yang berbeda, mari kita bicarakan tentang mengatur elemen di halaman kita. Bootstrap menyediakan beberapa kelas yang praktis untuk ini.

Atas, Bawah, Awal, dan Akhir

Anda dapat menggunakan kelas seperti top-0, bottom-50, start-50, dan end-0 untuk memosisikan elemen. Berikut adalah contohnya:

<div class="position-relative" style="height: 200px;">
<div class="position-absolute top-0 start-0">Sudut kiri atas</div>
<div class="position-absolute top-0 end-0">Sudut kanan atas</div>
<div class="position-absolute bottom-0 start-0">Sudut kiri bawah</div>
<div class="position-absolute bottom-0 end-0">Sudut kanan bawah</div>
</div>

Ini akan menempatkan empat div di setiap sudut div induk. Itu seperti menempatkan catatan Sticky di papan putih!

Mengenter Elemen

Mengenter elemen adalah tugas umum dalam desain web. Bootstrap membuatnya mudah dengan kelas translate-middle. Berikut adalah cara Anda dapat mententer elemen secara horizontal dan vertikal:

<div class="position-relative" style="height: 200px;">
<div class="position-absolute top-50 start-50 translate-middle">
Saya tepat di tengah!
</div>
</div>

Ini mententer div dalam secara vertikal dan horizontal di dalam induknya. Itu seperti bullseye dalam darts - tepat di tengah!

Beberapa Contoh Lain

Mari kitaakhiri dengan beberapa contoh lagi untuk memperkuat pemahaman kita.

Navigasi Sticky Atas

Berikut adalah cara Anda membuat navigasi yang menempel di atas pada layar yang lebih besar:

<nav class="navbar navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navigasi menempel di atas</a>
</div>
</nav>

Navigasi ini akan gulir dengan halaman pada perangkat Bergerak, tetapi menempel di atas pada layar yang lebih besar. Itu seperti kameleon, menyesuaikan diri dengan lingkungan!

Overlays

Anda dapat membuat efek overlay menggunakan pemosisian:

<div class="position-relative">
<img src="beautiful-landscape.jpg" alt="Lanskap" style="width: 100%;">
<div class="position-absolute top-50 start-50 translate-middle text-white">
<h2>Lanskap Menarik</h2>
<p>Nikmati pandangan!</p>
</div>
</div>

Ini menempatkan teks di atas gambar, mententer secara vertikal dan horizontal. Itu seperti menambah keterangan ke kartu pos!

Dan itu dia, teman-teman! Kita telah melakukan perjalanan melalui dunia pemosisian Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini. Selamat coding, dan semoga elemen Anda selalu diposisikan dengan sempurna!

Credits: Image by storyset