Containing Block

Sepanjang section ini kita berulang kali menyebut frasa “dihitung terhadap jangkarnya”. Kotak acuan itu punya nama resmi: containing block — kotak yang menjadi dasar perhitungan offset dan persentase suatu elemen. Menentukan kotak ini adalah sisi paling menentukan dari setiap nilai position, dan perbedaan kecil di antara mereka menjelaskan sebagian besar bug positioning yang belum terjawab sampai chapter ini. Mari kita rapikan semuanya dalam satu tabel, lalu bedah tiga implikasinya.

Tabel Acuan per Nilai position #

Dua detail pada tabel ini layak digarisbawahi. Pertama, absolute mengacu ke padding box — offset nol menempel di tepi dalam border, bukan di tepi content — sedangkan static dan relative mengacu ke content box. Kedua, “initial containing block” adalah area berukuran viewport yang terletak di pangkal dokumen; itulah sebabnya elemen absolute tanpa induk positioned mendarat di sudut halaman, bukan di sudut viewport yang mengikuti gulir.

Implikasi 1: Jangkar Menentukan Tujuan Offset #

Deklarasi offset yang sama bisa menghasilkan tempat yang berbeda total, tergantung jangkarnya. Inilah alasan pola “induk position: relative” muncul di hampir semua chapter sebelumnya: relative tidak menggeser induk sedikit pun, tetapi mengubah siapa jangkar bagi keturunan absolute-nya.

Lencana dengan top: 8px; right: 8px akan menempel di kartu bila kartunya relative — dan melayang ke pangkal dokumen bila tidak ada satu pun ancestor positioned. Demo di bawah membuktikannya dengan markup lencana yang identik:

Markup identik, hasil berbeda total — hanya jangkarnya yang berbeda.

Implikasi 2: Persentase Butuh Ukuran yang Pasti #

Containing block juga menjadi dasar perhitungan nilai persentase. Untuk height, aturannya ketat: persentase hanya menghasilkan angka bila tinggi jangkarnya pasti — tidak bergantung pada isi. Jika tinggi induk auto, height: 50% pada anak diperlakukan seperti auto dan hasilnya nol.

.panel-dasar {
  height: 240px; /* jangkar kini punya tinggi pasti */
}

.panel-dasar .isi-penuh {
  height: 50%;   /* 50% dari 240px = 120px */
}

Tanpa height pada .panel-dasar, deklarasi 50% yang sama tidak berpengaruh — pitfall klasik yang membuat banyak developer berpindah ke unit viewport (vh/dvh) atau sistem layout modern. Demo membandingkan jangkar bertinggi pasti dengan jangkar auto:

Perhatikan bahwa keketatan ini khusus sumbu tinggi. Persentase width selalu bisa dihitung karena lebar containing block dalam layout block memang sudah pasti meskipun tinggi induknya auto; itulah sebabnya width: 50% bekerja di mana saja, sementara height: 50% menuntut induk yang tingginya terdefinisi.

Implikasi 3: transform Mencuri Jangkar fixed #

Peringatan pada chapter Fixed kini bisa dijelaskan dengan istilah yang tepat: ancestor dengan transform atau filter bernilai selain none menjadi containing block bagi keturunan fixed-nya. Jangkar elemen fixed pindah dari viewport ke ancestor itu, sehingga ia ikut bergulir bersama ancestor tersebut.

.modal-beranimasi {
  transform: translateY(10px); /* modal kini menjadi jangkar anak fixed */
}

.modal-beranimasi .tombol-tutup-fixed {
  position: fixed;             /* diam di modal, bukan di viewport */
}

Solusinya konsisten: keluarkan elemen fixed dari subpohon yang ditransform, atau hapus transform yang tidak benar-benar dibutuhkan. Aturan yang sama berlaku untuk sticky — dan keduanya menjadi alasan tambahan untuk memagari komponen dengan sengaja, seperti isolation: isolate pada chapter sebelumnya.

Kesalahan Umum #

Ringkasan #

Containing block adalah kotak acuan di balik setiap offset dan persentase: static/relative mengacu ke content box induk, absolute ke padding box ancestor positioned terdekat, fixed ke viewport, dan sticky ke area scroll terdekat — dengan transform dan filter sebagai pencuri jangkar yang harus diawasi. Tiga implikasi di atas menutup rantai pengetahuan positioning kita. Chapter penutup section kini menyatukan semuanya: tiga pola nyata yang dirakit lengkap dengan alasannya, plus tabel keputusan untuk memilih nilai position dengan cepat.