CSS Academy · Pelajaran

Pemosisian Absolut dan Blok Pembungkus

Posisikan elemen secara absolut relatif terhadap leluhur terdekat yang diposisikan.

Pemosisian Absolut dan Blok Pembungkus adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

position: absolute

Elemen yang diposisikan secara absolut dikeluarkan dari alur normal dokumen. Elemen lain bertindak seolah-olah elemen tersebut tidak ada. Elemen ini diposisikan relatif terhadap leluhur terdekatnya yang diposisikan.

Blok Penampung

Blok penampung untuk elemen yang diposisikan secara absolut adalah leluhur terdekat yang memiliki nilai position selain static. Jika tidak ada, elemen tersebut diposisikan relatif terhadap blok penampung awal (area pandang).

Menyiapkan Blok Penampung

Pola yang paling umum: tambahkan position: relative ke elemen induk untuk menampung anak yang diposisikan secara absolut.

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

Properti Pergeseran dengan absolute

Dengan pemosisian absolut, top/right/bottom/left diukur dari tepi padding blok penampung.

<div class="tooltip-wrap">Hover target<span class="tooltip">I'm below the parent</span></div>

Pemusatan dengan absolute

Teknik klasik untuk memusatkan elemen absolut:

<div class="center-wrap"><div class="centered">Perfectly centered</div></div>

Lebar dan Tinggi Elemen Absolut

Elemen yang diposisikan secara absolut secara default menyesuaikan ukuran kontennya (kecuali lebar/tinggi ditetapkan). Elemen tersebut tidak lagi melebar memenuhi lebar kontainernya seperti elemen blok.

Peregangan dengan Semua Sisi

Menetapkan keempat sisi ke 0 akan meregangkan elemen yang diposisikan secara absolut hingga memenuhi blok penampungnya:

<div class="stretch-wrap"><div class="overlay">Overlay covers all edges</div></div>

Singkatan inset

Properti inset adalah singkatan untuk top, right, bottom, dan left secara bersamaan:

<div class="cover-wrap"><div class="full-cover"></div></div>

Penumpukan dengan z-index

Elemen yang diposisikan secara absolut berpartisipasi dalam konteks penumpukan. Gunakan z-index untuk mengontrol elemen absolut yang saling tumpang tindih agar tampil di atas.

<div class="stack-wrap"><div class="box-a">Behind</div><div class="tooltip">On top (z-index:100)</div></div>

Kesalahan Umum: Melupakan Elemen Induk

Jika Anda lupa menambahkan position: relative ke elemen induk, anak absolut akan diposisikan relatif terhadap leluhur terdekat yang sudah diposisikan—sering kali area pandang. Selalu periksa blok penampungnya.

Absolut di Dalam Flex/Grid

Kontainer flex atau grid tidak otomatis menjadi elemen yang diposisikan. Anda tetap perlu menambahkan position: relative secara eksplisit agar elemen tersebut menjadi blok penampung untuk anak absolut.

Pemeriksaan Singkat

Di mana elemen yang diposisikan secara absolut ditempatkan jika tidak ada leluhurnya yang memiliki position selain static?

Ringkasan

Elemen yang diposisikan secara absolut meninggalkan alur dokumen dan diposisikan relatif terhadap leluhur terdekatnya yang bukan statis. Selalu tambahkan position: relative ke elemen induk untuk mengontrol penempatan. Gunakan inset: 0 untuk meregangkan elemen absolut hingga memenuhi kontainernya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemosisian Absolut dan Blok Pembungkus” gratis?

Ya — teks lengkap “Pemosisian Absolut dan Blok Pembungkus” 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 Absolut dan Blok Pembungkus”?

Posisikan elemen secara absolut relatif terhadap leluhur terdekat yang diposisikan. 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 2 dari 4.

Berapa lama pelajaran “Pemosisian Absolut dan Blok Pembungkus” 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