CSS - Propriedad Bawah: Menjayakan Penempatan Elemen

Hai sana, para ahli CSS masa depan! Hari ini, kita akan melihat dunia yang menarik properti CSS bottom. Sebagai guru sains komputer tetangga yang ramah, saya di sini untuk membimbing Anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita embarkasi dalam petualangan yang menarik ini bersama!

CSS - Bottom

Apa Itu Properti CSS bottom?

Sebelum kita masuk ke hal-hal yang mendalam, mari kita mulai dari dasar. Properti CSS bottom adalah seperti tongkat ajaib yang memungkinkan Anda menempatkan elemen dari bagian bawah elemen pengelolaannya. Itu adalah bagian dari kitab peralatan penempatan CSS, bekerja bersama properti seperti top, left, dan right.

Pertimbangkan itu seperti memberikan elemen HTML Anda set koordinat, memberitahu mereka tempat tepat di mana mereka harus duduk di halaman web Anda. Itu seperti bermain permainan digital Tetris, tapi bukan blok jatuh, Anda menata elemen web!

Nilai yang Mungkin

Sekarang, mari kita lihat nilai yang berbeda yang properti bottom kita dapatkan. Itu seperti memilih dari menu opsi penempatan:

Nilai	Deskripsi
auto	Browser menghitung posisi bawah
panjang	Menentukan posisi bawah dalam px, pt, cm, dll.
%	Menentukan posisi bawah dalam % elemen pengelola
inherit	Mewarisi nilai dari elemen induk
initial	Mengatur properti ini ke nilai defaultnya

mari kita lihat ini dalam aksi dengan beberapa contoh kode:

/* Menggunakan nilai pixel */
.box1 {
bottom: 20px;
}

/* Menggunakan persentase */
.box2 {
bottom: 10%;
}

/* Menggunakan 'auto' */
.box3 {
bottom: auto;
}

Dalam contoh di atas, box1 akan ditempatkan 20 pixel dari bagian bawah, box2 akan 10% dari bagian bawah wadahnya, dan box3 akan membiarkan browser menentukan posisi bagian bawahnya.

Terapkan ke

Properti bottom bukan solusi satu ukuran. Itu hanya bekerja secara magis pada elemen dengan nilai posisi yang ditentukan. Mari kita lihat jenis penempatan yang berlaku:

Absolut
Relatif
Tetap
Lengket

Kita akan mengexploreasi masing-masing dari ini secara detil. Tetapi ingat, bottom tidak mempengaruhi elemen yang ditempatkan secara statis (penempatan default).

Sintaks DOM

Untuk Anda yang suka memanjakan tangan Anda dengan JavaScript, ini adalah cara Anda dapat memanipulasi properti bottom menggunakan Document Object Model (DOM):

object.style.bottom = "20px"

Baris kode ini akan mengatur properti bottom elemen ke 20 pixel. Itu seperti memberikan elemen Anda dorong ke bawah kecil!

CSS bottom - Dengan Penempatan Absolut

Sekarang, mari kita masuk ke jenis penempatan yang berbeda, mulai dari penempatan absolut. Ketika elemen ditempatkan secara absolut, itu diambil keluar dari aliran dokumen normal dan ditempatkan relatif ke pengelolaanya yang ditempatkan.

.parent {
position: relative;
height: 200px;
background-color: #f0f0f0;
}

.child {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #ff9900;
padding: 10px;
}

<div class="parent">
<div class="child">Saya ditempatkan secara absolut!</div>
</div>

Dalam contoh ini, elemen anak akan ditempatkan 20 pixel dari bagian bawah dan 20 pixel dari sebelah kanan wadahnya. Itu seperti memberikan elemen Anda tempat khusus di bioskop halaman web Anda!

CSS bottom - Dengan Penempatan Relatif

Penempatan relatif sedikit berbeda. Elemen ditempatkan relatif ke posisinya normal, dan elemen lain menyesuaikan diri di sekitarnya.

.box {
position: relative;
bottom: 30px;
background-color: #00ff00;
padding: 10px;
}

<div class="box">Saya ditempatkan secara relatif!</div>

Kotak hijau ini akan digeser 30 pixel ke atas dari posisinya biasa. Itu seperti mengatakan kepada elemen Anda, "Pindah ke atas sedikit, tapi tetap di tempatmu di baris!"

CSS bottom - Dengan Penempatan Tetap

Penempatan tetap adalah seperti memberikan elemen Anda pass VIP permanen. Itu tetap di tempatnya meskipun halaman di gulir.

.header {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
color: white;
padding: 10px;
}

<div class="header">Saya footer tetap!</div>

Ini membuat footer yang menempel di bagian bawah viewport, selalu terlihat tanpa menghiraukan berapa banyak Anda gulir. Itu sempurna untuk informasi penting atau navigasi yang Anda inginkan tetap dapat diakses kapan saja.

CSS bottom - Dengan Penempatan Lengket

Penempatan lengket adalah yang baru di lingkungan. Itu adalah campuran dari penempatan relatif dan tetap. Elemen diperlakukan sebagai ditempatkan secara relatif sampai ia mencapai batas yang ditentukan, kemudian menjadi tetap.

.sticky-note {
position: sticky;
bottom: 20px;
background-color: #ffff00;
padding: 10px;
}

<div class="sticky-note">Saya catatan lengket!</div>

Catatan kuning ini akan gulir bersama halaman sampai ia 20 pixel dari bagian bawah viewport, kemudian ia akan menempel. Itu seperti catatan Post-it digital untuk halaman web Anda!

CSS bottom - Dengan Penempatan Statis

Terakhir tapi bukan terkecil, mari bicarakan penempatan statis. Ini adalah penempatan default untuk semua elemen, tapi ingat - properti bottom tidak berpengaruh pada elemen yang ditempatkan secara statis!

.static-box {
position: static;
bottom: 50px; /* Ini tidak akan berpengaruh */
background-color: #ff00ff;
padding: 10px;
}

<div class="static-box">Saya ditempatkan secara statis!</div>

Dalam contoh ini, meskipun kita telah menetapkan nilai bottom, kotak pink ini tidak akan bergerak dari posisinya biasa di aliran dokumen. Itu seperti mencoba memindahkan gunung - itu hanya tidak akan terjadi!

Dan itu adalah dia, teman-teman! Kita telah melakukan perjalanan melalui negeri penempatan CSS, mengeksplorasi properti bottom dalam keseluruhan keindahannya. Ingat, menguasai penempatan CSS adalah seperti belajar menari - itu memerlukan latihan, tapi sekali Anda mendapat irama, Anda dapat menciptakan tata letak yang indah dan harmonis yang akan membuat halaman web Anda menyanyi!

Tetap mencoba, tetap belajar, dan terutama, bersenang-senang dengannya. Setelah semuanya, pengembangan web adalah sama halnya seni dan sains. Selamat coding, para ahli CSS masa depan!

Credits: Image by storyset