Pemosisian: relative, absolute, fixed, sticky
Keluarkan elemen dari alur normal menggunakan nilai position untuk menumpuk konten, menetapkan header, dan membuat bilah samping tetap.
Pemosisian: relative, absolute, fixed, sticky adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Alur Dokumen Normal
Secara bawaan, elemen mengikuti alur dokumen normal: elemen blok tersusun secara vertikal, sedangkan elemen sebaris mengalir secara horizontal di dalam teks. Properti position memungkinkan Anda keluar dari alur ini untuk membuat lapisan, header tetap, dan keterangan alat.
position: static (Bawaan)
Setiap elemen dimulai dengan position: static. Artinya, elemen diposisikan berdasarkan alur dokumen normal. Properti top, right, bottom, dan left tidak berpengaruh pada elemen statis.
position: relative
position: relative mempertahankan elemen dalam alur normal, tetapi memungkinkan Anda menggesernya dari posisi awal menggunakan top, right, bottom, dan left. Yang terpenting, properti ini membuat konteks penempatan untuk elemen turunan yang diposisikan secara absolut.
.card {
position: relative;
top: 10px; /* shift 10px down from original position */
left: -5px; /* shift 5px left */
}position: absolute
position: absolute mengeluarkan elemen dari alur normal. Elemen tersebut diposisikan relatif terhadap leluhur terposisi terdekatnya (posisi apa pun selain static). Jika tidak ada leluhur terposisi, posisinya relatif terhadap area tampilan.
.card {
position: relative; /* creates context */
}
.card .badge {
position: absolute;
top: 12px;
right: 12px; /* top-right corner of .card */
}Properti z-index
Elemen yang diposisikan dapat saling bertumpuk. Gunakan z-index untuk mengatur urutan penumpukan. z-index yang lebih tinggi = berada di atas. Ini hanya berfungsi pada elemen yang diposisikan (bukan static). Properti ini membuat konteks penumpukan baru.
.tooltip {
position: absolute;
z-index: 100; /* above other content */
}
.modal {
position: fixed;
z-index: 1000; /* above tooltip */
}position: fixed
position: fixed mengeluarkan elemen dari alur normal dan menahannya pada area tampilan. Elemen tersebut tidak ikut bergulir bersama halaman. Ini cocok untuk tajuk yang selalu terlihat, tombol tindakan mengambang, dan spanduk kuki.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: white;
z-index: 50;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}position: sticky
position: sticky merupakan gabungan: elemen bergulir bersama halaman hingga mencapai ambang batas (ditetapkan dengan top/bottom), lalu elemen tersebut melekat. Ini berguna untuk tajuk bagian dalam tabel panjang atau bilah sisi yang melekat setelah tajuk.
.sidebar {
position: sticky;
top: 80px; /* sticks 80px from top after scroll */
align-self: flex-start;
}Pemusatan dengan position: absolute
Teknik klasik: gabungkan position: absolute; top: 50%; left: 50% dengan transform: translate(-50%, -50%) untuk memusatkan elemen secara tepat di dalam induk terposisinya.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 480px;
background: white;
border-radius: 12px;
}Luapan Tersembunyi Memotong Elemen Anak Absolut
Elemen anak yang diposisikan secara absolut secara bawaan dapat melampaui batas induknya. Menambahkan overflow: hidden ke induk akan memotong apa pun yang berada di luar kotaknya — berguna untuk efek gambar kartu dan pemotongan lencana.
Jebakan: Konteks Penumpukan yang Tidak Diinginkan
Beberapa properti secara tidak sengaja membuat konteks penumpukan: transform, filter, isolation: isolate. Hal ini dapat menyebabkan konflik z-index, ketika elemen z-index: 9999 tetap berada di belakang elemen lain karena berada di dalam konteks penumpukan yang lebih rendah.
Kapan Menggunakan Setiap Pemosisian
relative: offset dan konteks pemosisian. absolute: lencana, petunjuk singkat, dan lapisan penutup yang relatif terhadap induk. fixed: tajuk yang selalu terlihat, jendela modal, dan notifikasi singkat. sticky: tajuk bagian dan navigasi bilah sisi yang mengikuti guliran. Hindari position untuk tata letak — gunakan Flex atau Grid.
Pemeriksaan Singkat
Sebuah elemen memiliki position: absolute; top: 0; right: 0;. Di mana elemen tersebut akan muncul jika induknya memiliki position: relative?
Ringkasan: Pemosisian CSS
static adalah nilai bawaan. relative menggeser elemen tanpa mengeluarkannya dari alur dan membuat konteks pemosisian. absolute mengeluarkan elemen dari alur dan memosisikannya terhadap leluhur terposisi terdekat. fixed melekat pada area tampilan. sticky bergulir lalu melekat. Gunakan z-index untuk mengatur urutan tumpang tindih.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemosisian: relative, absolute, fixed, sticky” gratis?
Ya — teks lengkap “Pemosisian: relative, absolute, fixed, sticky” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pemosisian: relative, absolute, fixed, sticky”?
Keluarkan elemen dari alur normal menggunakan nilai position untuk menumpuk konten, menetapkan header, dan membuat bilah samping tetap. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 4 dari 4.
Berapa lama pelajaran “Pemosisian: relative, absolute, fixed, sticky” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Pemilih dan Kaskade
- Warna, Tipografi, dan Model Kotak
- Dasar Display: block, inline, flex, grid
- Pemosisian: relative, absolute, fixed, sticky