CSS Academy · Pelajaran

Pemosisian Statis dan Relatif

Pahami posisi statis bawaan dan cara posisi relatif memindahkan elemen dari tempat normalnya.

Pemosisian Statis dan Relatif adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Properti position

Properti position mengontrol cara elemen ditempatkan dalam alur dokumen. Lima nilainya adalah: static, relative, absolute, fixed, dan sticky.

position: static (Bawaan)

Setiap elemen secara default menggunakan position: static. Elemen statis mengikuti alur normal dokumen—elemen blok ditumpuk secara vertikal, sedangkan elemen sebaris mengalir dari kiri ke kanan. Properti pergeseran (top, right, bottom, left) tidak berpengaruh.

position: relative

position: relative mempertahankan elemen dalam alur normal, tetapi memungkinkan Anda menggesernya relatif terhadap posisi normalnya sendiri menggunakan top, right, bottom, dan left.

<div class="shifted">Shifted 10px down, 20px right — original space still reserved.</div>

Poin Penting: Ruang Tetap Dipertahankan

Saat Anda menggunakan position: relative dengan pergeseran, elemen berpindah secara visual, tetapi ruang tata letak aslinya tetap disediakan. Elemen lain tidak mengisi celah tersebut.

Atas Kanan Bawah Kiri

Properti pergeseran memindahkan elemen dari titik acuannya:

top: memindahkan elemen ke bawah dari tepi atas
left: memindahkan elemen ke kanan dari tepi kiri
Nilai negatif membalikkan arah

<span class="badge">NEW</span>

z-index Memerlukan position

z-index hanya berfungsi pada elemen yang diposisikan (bukan elemen statis). Jika Anda perlu mengontrol urutan lapisan, tetapkan setidaknya position: relative.

<div class="tooltip">Tooltip (relative + z-index)</div>

Relative sebagai Blok Penampung

Penggunaan paling penting position: relative adalah menjadikan elemen sebagai blok penampung untuk anak yang diposisikan secara absolut—bahkan tanpa nilai pergeseran apa pun.

<div class="card">Card content<span class="card__badge">Badge</span></div>

Kombinasi Relatif + Transformasi

Menggabungkan position: relative dengan transform akan membuat konteks penumpukan baru. Elemen tetap berada dalam alur, tetapi dapat ditransformasi secara visual.

<div class="hover-lift demo-hover">Hover me — I lift up</div>

When NOT to Use relative

Hindari menetapkan position: relative pada setiap elemen. Ini membuat konteks penumpukan yang dapat mempersulit pengelolaan z-index. Gunakan hanya saat Anda memerlukan pergeseran atau ingin menjadikan elemen sebagai jangkar bagi anak yang diposisikan secara absolut.

Menggabungkan dengan Transisi

Karena pemosisian relatif tidak memengaruhi alur tata letak, Anda dapat menganimasikan top/left dengan aman untuk efek visual—meskipun menganimasikan transform: translate() lebih efisien.

<div class="shake demo-hover">Hover me — I shake</div>

Menelusuri Masalah Pemosisian

Di DevTools, lihat panel Hasil Perhitungan untuk melihat nilai position yang berlaku. Diagram model kotak menampilkan koordinat pergeseran yang diterapkan secara tepat.

Pemeriksaan Singkat

Apa yang terjadi pada ruang tata letak suatu elemen saat Anda menerapkan position: relative; top: 20px?

Ringkasan

position: static adalah bawaan—tanpa pergeseran dan tanpa penumpukan. position: relative memungkinkan pergeseran dari posisi elemen itu sendiri serta mempertahankan ruang tata letaknya. Peran terpentingnya adalah bertindak sebagai blok penampung untuk anak yang diposisikan secara absolut.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemosisian Statis dan Relatif” gratis?

Ya — teks lengkap “Pemosisian Statis dan Relatif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemosisian Statis dan Relatif”?

Pahami posisi statis bawaan dan cara posisi relatif memindahkan elemen dari tempat normalnya. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Pemosisian Statis dan Relatif” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy