Bagaimana Memperbaiki Halaman Web Yang Memiliki Kotak Tumpang Tindih

Anda memiliki situs web, tetapi kotak div tidak berbaris dengan benar. Ini dapat terjadi karena beberapa alasan, terutama jika Anda mempertimbangkan masalah posisi dengan div dari satu situs web ke situs web lain. Demikian pula, elemen kotak mungkin tumpang tindih karena beberapa alasan, mulai dari kesalahan pemosisian hingga masalah luapan dan masalah pelampung sederhana. Dalam kebanyakan kasus, perubahan cepat dan mudah pada style sheet situs web Anda akan memperbaiki masalah.

1

Tambahkan margin jika kotak saat ini tidak memiliki margin dan tumpang tindih hanya dalam jumlah kecil. Anda dapat mengatur margin hanya di satu sisi, seperti di kiri, jika Anda hanya ingin menggunakan elemen margin untuk mendorong elemen kotak lainnya menjauh. Misalnya, jika div A dan div B ditempatkan di samping satu sama lain dan div B tumpang tindih di sisi kiri, Anda dapat memodifikasi style sheet Anda untuk menambahkan margin sisi kiri ke div A sebagai berikut:

2

Cari style sheet Anda untuk mencari nilai yang dapat menyebabkan tumpang tindih dan mengubahnya. Jika Anda menggunakan pemosisian absolut untuk mengatur elemen div situs web Anda, maka ini gratis untuk semua - elemen apa pun dapat tumpang tindih dengan elemen lain di halaman. Jadi jika Anda menetapkan div A dengan lebar 100 piksel dan 15 piksel dari atas dan kiri halaman, div B harus setidaknya 115 piksel ke kiri agar tidak tumpang tindih dengan div A. Anda dapat menentukan posisi dari atas atau bawah, dan dari kanan atau kiri.

3

Setel div dengan lebar tertentu dan sembunyikan luapannya. Ini menghentikan div melebihi ukuran yang ditentukan dan mencegah konten agar tidak tumpah. Misalnya, jika div A tidak memiliki lebar yang ditetapkan dan Anda meletakkan gambar besar di dalamnya, div secara otomatis akan meluas untuk mengakomodasi gambar. Jika Anda menyetel lebarnya, gambar akan tetap ditampilkan di luar tepi div, tetapi div tidak akan meluas. Jika Anda menyembunyikan overflow, gambar hanya akan ditampilkan dalam batas div dan tidak akan memperluas elemen. Misalnya, untuk menyetel div A menjadi lebar 200 piksel dan tidak meluap, Anda akan menggunakan kode gaya ini:

4

Gunakan opsi "float" untuk menumpuk kotak div berdampingan secara otomatis. Misalnya, Anda ingin div A bertindak sebagai sidebar dan div B untuk menampung konten Anda - Anda dapat mengapungkan kedua div ke kiri, sehingga menyebabkannya sejajar secara horizontal. Elemen div mengambang tidak akan tumpang tindih. Contoh dari dua elemen mengambang terlihat seperti ini: