Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini

X
Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

OVERFLOW

Pelajari tentang overflow dalam CSS, cara kerjanya, serta bagaimana menggunakannya untuk mengontrol konten yang melebihi batas elemen.

Overflow adalah properti dalam CSS yang mengatur apa yang terjadi jika konten suatu elemen melebihi batas elemen tersebut. Dalam artikel ini, kamu akan belajar mengenai penggunaan dan pilihan nilai dari properti overflow serta contoh penggunaannya.

Properti Overflow

Properti overflow dapat memiliki nilai berikut:

  • visible : Ini adalah nilai default. Konten yang melebihi batas elemen menjadi terlihat dan keluar dari batasan elemen. Maka dari itu, mungkin mengganggu tampilan layout halaman web.

  • hidden : Konten yang melebihi batas elemen akan tersembunyi dan tidak terlihat.

  • scroll : Jika konten melebihi batas elemen, scrollbar akan muncul.

  • auto : Scrollbar hanya muncul jika konten melebihi batas elemen.

Mari kita lihat contoh penggunaan dari masing-masing properti di atas.

Contoh penggunaan overflow: visible

overflow: visible;

Dalam contoh ini, konten yang melebihi batas elemen menjadi terlihat dan bisa mengganggu tampilan layout halaman web.

Contoh penggunaan overflow: hidden

overflow: hidden;

Dalam contoh ini, konten yang melebihi batas elemen menjadi tidak terlihat atau tersembunyi.

Contoh penggunaan overflow: scroll

overflow: scroll;

Dalam contoh ini, scrollbar akan muncul jika konten melebihi batas elemen.

Contoh penggunaan overflow: auto

overflow: auto;

Dalam contoh ini, Konten yang tidak melebihi batas elemen tidak akan menampilkan scrollbar. Namun, jika konten melebihi batas elemen, scrollbar akan muncul.

👈🏼 Z-index
Transformasi 2D CSS 👉🏼