Sampai chapter ini kita menulis top, right, bottom, dan left satu per satu — dan sering kali keempatnya ditulis dengan nilai yang sama, misalnya nol untuk overlay penuh. CSS menyediakan shorthand resminya: inset. Property ini menjadi Baseline Widely available sejak 2021 sehingga aman dipakai di materi inti. Pada chapter ini kita mempelajari bentuk-bentuk shorthand-nya, perilaku nilai auto yang sering disalahpahami, pasangan logical-nya, dan resep overlay penuh layar yang menjadi salah satu potongan kode paling sering diketik di sepanjang karier CSS kita.
Shorthand inset = top right bottom left #
Urutan nilainya mengikuti konvensi jam yang sama dengan margin dan padding: atas, kanan, bawah, kiri (searah jarum jam dari atas).
.overlay {
inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */
}
.kartu-terapung {
inset: 16px; /* semua sisi 16px */
}
.bilah-atas {
inset: 0 0 auto 0; /* menempel atas, kiri-kanan nol, tinggi mengikuti isi */
}Baris ketiga menunjukkan kekuatan sesungguhnya dari shorthand: auto pada sisi bawah membebaskan tinggi bilah mengikuti kontennya, sehingga satu deklarasi merangkum empat property dengan nilai campuran. Bila keempat nilai sama, cukup satu; bila atas-bawah sama dan kiri-kanan sama, dua nilai cukup — persis pola margin yang sudah kita kuasai di box model.
Satu sifat shorthand yang perlu diwaspadai: inset mengembalikan keempat sisi yang tidak disebutkan ke nilai awalnya. Deklarasi inset: 0 yang ditulis setelah top: 8px pada aturan yang sama akan menimpa top menjadi 0 — urutan penulisan dalam satu blok tetap penting, persis seperti jebakan shorthand background dan margin yang pernah kita bahas.
Memahami Nilai auto #
Nilai awal keempat offset adalah auto, dan di situlah banyak kebingungan bermula. Untuk elemen absolute, aturannya bisa diringkas per sumbu:
| Kombinasi offset | Hasil pada elemen absolute |
|---|---|
top: auto; bottom: auto | Posisi vertikal mengikuti static position — bekas tempatnya di alur |
left: auto; right: auto | Posisi horizontal mengikuti static position |
top: 0; bottom: 0 dengan height auto | Tinggi meregang mengisi jangkar |
left: 0; right: 0 dengan width auto | Lebar meregang mengisi jangkar |
Keempat sisi 0 | Mengisi seluruh padding box jangkar |
Tiga wadah berukuran sama, masing-masing dengan anak absolute berbeda perlakuan offsetnya:
Tiga perilaku berbeda lahir dari satu family property yang sama.
Aturan praktisnya: sisi yang diberi nilai memosisikan, sisi yang dibiarkan auto menyerahkan keputusan ke static position atau ke ukuran konten. Ketika kedua sisi sebuah sumbu dipatok dan ukuran dibebaskan, elemen meregang — mekanisme yang sama yang membuat inset: 0 menghasilkan overlay penuh tanpa satu pun angka lebar-tinggi.
Pasangan Logical: inset-inline dan inset-block #
Shorthand logical membagi sumbu berdasarkan arah tulisan, bukan arah mata angka:
.tooltip {
inset-inline: 0; /* kiri + kanan sekaligus pada tulisan horizontal */
bottom: 8px;
}inset-inline mengikat sisi kiri-kanan (pada tulisan horizontal), sedangkan inset-block mengikat atas-bawah. Manfaatnya terasa ketika mode tulisan halaman berubah arah — misalnya untuk bahasa yang ditulis vertikal — karena kedua property itu mengikuti logika teks, bukan orientasi fisik layar. Untuk layout berbahasa Indonesia, keduanya berperilaku identik dengan pasangan fisiknya; kenali saja bentuknya agar tidak asing saat membaca kode orang lain.
Resep: Overlay Penuh Layar #
Inilah kombinasi yang paling sering dipakai dari seluruh chapter ini:
.backdrop-modal {
position: fixed;
inset: 0;
background-color: rgba(15, 23, 42, 0.5);
}Tiga baris ini menggantikan empat deklarasi offset sekaligus, dan karena jangkarnya viewport, overlay tetap menutup penuh pada posisi gulir mana pun — panggung standar di belakang modal, drawer, atau menu layar penuh. Demo berikut menghadirkan resep itu di atas konten yang bisa digulir:
Selain panjang tetap seperti px, offset — termasuk di dalam inset — menerima persentase dan unit relatif. Persentasenya dihitung terhadap dimensi jangkar sesuai sumbunya: top: 50% berarti setengah tinggi jangkar, dan left: 50% berarti setengah lebarnya. Kombinasi top: 50%; left: 50% itulah titik berangkat klasik untuk memusatkan elemen pada induknya, sebelum offset negatif menyusul untuk memperbaiki titik tengahnya.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
inset: 0 tidak berpengaruh | Elemen masih static | Pasangkan dengan position: fixed/absolute |
| Overlay tidak menutup layar penuh | Satu sisi tertinggal bernilai auto | Cek keempat sisi; inset: 0 meringkasnya |
| Elemen meregang tanpa disengaja | Dua sisi sumbu yang sama dipatok dengan ukuran auto | Set width/height eksplisit, atau kembalikan satu sisi ke auto |
Ringkasan #
inset meringkas top, right, bottom, dan left dalam satu deklarasi berurutan jam, dengan auto sebagai penanda sisi yang bebas — sisi dipatok memosisikan atau meregangkan, sisi auto menyerahkan ke static position atau ukuran konten. Pasangan logical inset-inline dan inset-block melengkapi kotak perkakas untuk mode tulisan yang beragam. Dengan posisi terkunci, pertanyaan berikutnya muncul sendiri saat elemen bertumpuk: siapa yang berhak tampil di atas? Chapter berikutnya menjawabnya dengan z-index.