CSS - Penempatan

Table of Contents

Apa Itu Penempatan CSS?

Hai sana, para master CSS masa depan! Hari ini, kita akan melihat dunia menarik penempatan CSS. Sebagai guru komputer tetangga yang ramah, saya di sini untuk memandu anda dalam perjalanan ini langkah demi langkah. Percayalah, pada akhir pelajaran ini, anda akan menempatkan elemen seperti seorang pro!

Penempatan CSS seperti mengatur furnitur di dalam ruangan. Seperti anda memutuskan di mana untuk menempatkan sofa atau rak buku, penempatan CSS membolehkan anda mengawal di mana elemen muncul di laman web anda. Ia adalah alat yang kuat dan dapat mengubah desain statik anda menjadi susun atur dinamik.

Sintaks

Sebelum kita melompat ke jenis penempatan yang berbeza, mari kita lihat sintaks asas:

pemilih {
position: nilai;
}

Di sini, pemilih adalah elemen HTML yang anda mahu menempatkan, dan nilai adalah jenis penempatan yang anda mahu apply. Mudah, kan? Sekarang, mari kita jelajahi setiap jenis penempatan secara terperinci.

Elemen Penempatan Statis

Penempatan statis adalah default untuk setiap elemen. Ia seperti titik permulaan dalam permainan papan - di mana semua piece dimulakan sebelum permainan bermula.

div {
position: static;
}

Dengan penempatan statis, elemen mengalir secara naturally di dalam dokumen. Mereka tidak terpengaruh oleh properti atas, bawah, kiri, atau kanan. Ia adalah "normal" cara elemen berkelakuan.

Elemen Penempatan Relatif

Penempatan relatif seperti memberitahu elemen, "Pindah sedikit dari tempat biasa anda." Ia hebat untuk membuat penyesuaian kecil tanpa mengganggu aliran elemen lain.

.box {
position: relative;
top: 20px;
left: 30px;
}

Dalam contoh ini, elemen .box kita akan bergerak 20 pixel ke bawah dan 30 pixel ke kanan dari posisi biasanya. Ingat, elemen lain masih akan berkelakuan seperti jika kotak kita belum dipindahkan!

Elemen Penempatan Absolut

Penempatan absolut adalah rebol dunia CSS. Ia melepaskan diri dari aliran dokumen biasa dan menempatkan diri secara relatif kepada leluhur penempatan terdekatnya (atau blok mengandungi awal jika tiada leluhur penempatan wujud).

.absolute-box {
position: absolute;
top: 50px;
right: 30px;
}

Elemen .absolute-box ini akan ditempatkan 50 pixel dari atas dan 30 pixel dari kanan leluhur penempatan terdekatnya. Ia seperti memberikan elemen jet pack - ia boleh terbang di mana-mana di halaman!

Elemen Penempatan Tetap

Penempatan tetap seperti meletakkan catatan di skrin komputer anda. Tak matter betapa anda gulir, ia tetap di tempatnya.

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

Kod ini membuat navbar yang tetap di atas skrin walaupun anda gulir ke bawah halaman. Ia sempurna untuk menu navigasi atau pesan penting yang anda mahu pengguna lihat pada masa semua.

Elemen Penempatan Lekap

Penempatan lekap adalah kameleon penempatan CSS. Ia berkelakuan seperti relative penempatan sehingga elemen mencapai ambang yang ditentukan, kemudian ia menjadi fixed.

.sticky-header {
position: sticky;
top: 0;
}

Ini membuat header yang gulir biasa dengan halaman sehingga ia mencapai atas, kemudian melekat di sana saat anda terus gulir. Ia seperti trik magik untuk laman anda!

Penempatan Teks di Dalam Gambar

Sekarang, mari kita gabungkan keterampilan penempatan kita untuk membuat sesuatu yang menarik - teks ditempatkan di atas gambar:

<div class="image-container">
<img src="landscape.jpg" alt="Lanskap Cantik">
<p class="image-text">Keindahan Alam</p>
</div>

.image-container {
position: relative;
}

.image-text {
position: absolute;
bottom: 20px;
right: 20px;
color: white;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

Kod ini menempatkan teks di sudut kanan bawah gambar. Bayang-bayang teks menambahkan sentuhan yang bagus, membuatnya dapat dibaca terhadap pelbagai latar belakang.

Properti Penempatan CSS Terkait

Mari kitaakhiri dengan jadual properti penting terkait penempatan CSS:

Properti	Deskripsi	Contoh
top	Menetapkan posisi tepi atas	top: 10px;
bottom	Menetapkan posisi tepi bawah	bottom: 20%;
left	Menetapkan posisi tepi kiri	left: 5em;
right	Menetapkan posisi tepi kanan	right: 15vw;
z-index	Mengawal susunan tumpukan	z-index: 100;

Ingat, properti ini bekerja secara berbeza bergantung kepada kaedah penempatan yang anda gunakan. Cuba dengan mereka untuk membuat susun atur yang menarik!

Dan begitu juga, murid-murid sayangku! Kita telah melintasi dunia penempatan CSS bersama. Dari statis ke lekap, kita telah meliputi semuanya. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencuba teknik ini. Sebelum anda tahu, anda akan membuat susun atur web yang akan membuat pengembang berpengalaman mengatakan "WOW!"

Sekarang, pergi dan tentukan elemen anda dengan keyakinan. Dan selalu ingat - di dunia CSS, tidak ada sesuatu seperti "out of position"!

Credits: Image by storyset