CSS - Properti Bottom: Menungkap Kekayaan Penempatan Elemen

Hai teman-teman, para ahli CSS masa depan! Hari ini, kita akan mandar ke dunia yang menarik dari properti CSS bottom. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk memandu Anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita embarkasi dalam petualangan yang menarik ini bersama!

Apa Itu Properti CSS bottom?

Sebelum kita masuk ke detailnya, 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 set alat penempatan CSS, bekerja bersama properti seperti top, left, dan right.

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

Nilai yang Mungkin

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

Nilai	Deskripsi
auto	Browser menghitung posisi bawah
length	Menentukan posisi bawah dalam px, pt, cm, dll.
%	Menentukan posisi bawah dalam % dari 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 bawahnya.

Terapkan ke

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

1. Absolut
2. Relatif
3. Tetap
4. Lekat

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

Sintaks DOM

Untuk Anda yang suka merusak 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 sedikit dorong dari bagian bawah!

CSS bottom - Dengan Penempatan Absolut

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

.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 kursi khusus di teater 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 diubah 30 pixel ke atas dari posisi normalnya. Itu seperti mengatakan ke elemen Anda, "Pindah ke atas sedikit, tetapi tetap di tempatmu dalam baris!"

CSS bottom - Dengan Penempatan Tetap

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

.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 betapa banyak Anda gulir. Itu sempurna untuk informasi penting atau navigasi yang Anda inginkan tetap dapat diakses.

CSS bottom - Dengan Penempatan Lekat

Penempatan lekat adalah anak muda di lingkungan. Itu adalah campuran dari penempatan relatif dan tetap. Elemen diperlakukan seperti ditempatkan secara relatif sampai mencapai ambang batas tertentu, kemudian menjadi tetap.

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

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

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

CSS bottom - Dengan Penempatan Statis

Terakhir tapi bukan yang paling kurang, mari kita bicara tentang penempatan statis. Ini adalah penempatan default untuk semua elemen, tapi ingat - properti bottom tidak memiliki efek pada elemen yang ditempatkan secara statis!

.static-box {
position: static;
bottom: 50px; /* Ini tidak akan memberikan efek */
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 tidak akan bergerak dari posisinya normal dalam aliran dokumen. Itu seperti mencoba memindahkan gunung - itu hanya tidak akan terjadi!

Dan itu adalah dia, teman-teman! Kita telah menjelajahi negeri penempatan CSS, mengeksplorasi properti bottom dalam keseluruhan keindahannya. Ingat, menguasai penempatan CSS 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 yang paling penting, bersenang-senang dengan itu. Setelah semuanya, pengembangan web adalah seni serta ilmu. Selamat coding, para master CSS masa depan!

Credits: Image by storyset