Dalam proses mendesain halaman HTML, kita sering menemui masalah yang disebabkan oleh elemen bentuk yang menutupi elemen gaya. Gambar 1 adalah contoh tipikal. Jangan meremehkan masalah yang tampaknya "tingkat rendah" ini. Masalah serupa sering terjadi bahkan di beberapa situs web yang lebih besar. Artikel ini mengeksplorasi akar penyebab masalah ini dan mengusulkan solusinya - alasan mengapa saya mengatakan solusi daripada solusi permanen adalah karena dua raksasa Microsoft dan NetScape belum memiliki tindakan pencegahan.
1. Tampilkan prioritas elemen HTML
Elemen formulir yang umum digunakan dalam HTML meliputi: area teks (TEXTAREA), kotak daftar (SELECT), kotak input teks (tipe INPUT=teks), kotak input kata sandi (tipe INPUT=kata sandi), kotak input radio (tipe INPUT=radio), centang kotak input (tipe INPUT=kotak centang), dll. Elemen non-bentuk yang umum meliputi: tag link (A), tag DIV, tag SPAN, tag TABLE, dll. Alasan mendasar mengapa elemen formulir mengesampingkan elemen gaya terletak pada aturan prioritas tampilan default elemen HTML. Misalnya: elemen bingkai selalu diutamakan daripada elemen HTML lainnya dan oleh karena itu selalu ditampilkan di depan; elemen bentuk.
Semua elemen HTML ini dapat dibagi menjadi dua kategori sesuai dengan kebutuhan tampilannya, yaitu Elemen Berjendela dan Elemen Tanpa Jendela. Elemen berjendela meliputi: elemen SELECT, elemen OBJECT, plug-in, dan elemen IFRAME di IE 5.01 dan versi sebelumnya. Elemen tanpa jendela mencakup: sebagian besar elemen HTML biasa seperti tautan dan tag TABLE, sebagian besar elemen formulir kecuali elemen SELECT, dan elemen IFRAME di NS6+/IE 5.5 dan yang lebih baru. Masalah yang dibahas dalam artikel ini terutama terkait dengan elemen HTML berjendela. Inti masalahnya adalah sistem operasi selalu menampilkan elemen berjendela di depan elemen tanpa jendela secara default.
2. Jenis browser dan prioritas tampilan
Menurut jenis browsernya, urutan tampilan elemen HTML juga berbeda, yang dirangkum sebagai berikut:
⑴Netscape/Mozilla
Pada versi sebelum NS Browser 6.0, elemen formulir selalu memiliki prioritas lebih tinggi dibandingkan elemen HTML lainnya. Namun di browser NS 6+, urutan tampilan elemen IFRAME dan semua elemen formulir ditentukan oleh nilai atribut z-index CSS, atau oleh urutan kemunculannya di halaman HTML, kecuali untuk SELECT elemen.
⑵Internet Penjelajah
Pada browser IE terbaru (6.0), elemen IFRAME dan seluruh elemen form menentukan prioritas tampilan berdasarkan nilai atribut z-index atau urutan kemunculannya di halaman HTML, kecuali elemen SELECT.
⑶ Opera
Di browser Opera (7.10*) terbaru, semua elemen formulir, termasuk SELECT, diprioritaskan untuk ditampilkan berdasarkan atribut z-index atau urutan kemunculannya di halaman HTML. Namun, browser Opera terbaru tidak menampilkan IFRAME sebagai elemen tanpa jendela. IFRAME dianggap sebagai elemen berjendela dan lebih diutamakan daripada semua elemen tanpa jendela dalam urutan tampilan.
3. Atribut indeks z CSS
Kita tahu bahwa atribut z-index dari CSS dapat digunakan untuk mengontrol urutan overlay elemen HTML apa pun saat ditampilkan. Ketika beberapa elemen HTML tumpang tindih dalam ruang yang sama, elemen dengan nilai indeks z yang lebih besar akan menimpa elemen dengan nilai indeks z yang lebih kecil.
Namun nilai atribut z-index tidak mahakuasa. Seperti disebutkan sebelumnya, elemen berjendela selalu ditampilkan di depan elemen tanpa jendela, dan nilai atribut indeks-z hanya memainkan peran yang menentukan antara elemen bertipe sama. Secara kiasan, elemen berjendela dan elemen tanpa jendela seperti menggambar pada dua kanvas berbeda di jendela browser yang sama. Kedua jenis elemen tersebut berdiri sendiri, dan atribut indeks-znya hanya relatif terhadap elemen lain di kanvas yang sama. menendang masuk.
4. Obat
Sejauh menyangkut browser saat ini, solusi yang lebih efektif adalah: ketika elemen tanpa jendela perlu ditutup dengan elemen jendela, gunakan skrip untuk menyembunyikan elemen jendela secara dinamis. Berikut contoh lengkapnya:
<html><kepala>
<tipe gaya=teks/css>
.menuBlock{position:relative;top:14px;width:165px;border:2px hitam pekat;}
#subMenus{posisi:relatif;kiri:15px;atas:15px;lebar:171px;
padding-kiri:2px;padding-kanan:2px;batas:2px hitam pekat;
z-index:100;visibilitas:tersembunyi;}
#lb_1{posisi:mutlak;kiri:10px;atas:40px }
</gaya>
<tipe skrip=teks/javascript>
var isAktif = salah;
fungsi tampilkanMenu(){
isAktif = benar;
//document.getElementById(lb_1).style.visibility=disembunyikan;
document.getElementById(subMenus).style.visibility=terlihat;
}
fungsi sembunyikanMenu(){
isAktif = salah;
setTimeout('sembunyikan()',100);
}
fungsi sembunyikan(){
jika(!isAktif){
document.getElementById(subMenus).style.visibility = tersembunyi;
document.getElementById(lb_1).style.visibility=terlihat;
}
}
fungsi setStyle(menuItem){
isAktif = benar;
menuItem.style.backgroundColor = Abu-abu;
menuItem.style.color = #FFFFFF
}
fungsi setDefault(Item menu){
isAktif = salah;
menuItem.style.backgroundColor = ;
menuItem.gaya.warna =
sembunyikanMenu();
}
</skrip></head><tubuh>
<div id=gaya utama=posisi:absolute;lebar:200px;>
<div id=menuBlock class=menuBlock onmouseover=showMenu();
onmouseout=hideMenu();>menu CSS</div>
<div id=subMenus>
<div id=0 onmouseover=setStyle(ini)
onmouseout=setDefault(ini) >Item menu satu</div>
<!--Total empat item menu-->
</div><P>
<pilih id=lb_1 nama=lb_1>
<nilai opsi=-1/>Pilih daftar
<!--Tiga pilihan-->
</pilih>
</div>
</tubuh></html>
Bagian <STYLE> pada halaman mendefinisikan tiga gaya, yang masing-masing digunakan untuk bilah menu, item menu, dan daftar pilihan. Definisi gaya memastikan bahwa area tampilan menu dan daftar pilihan tumpang tindih. Bagian <BODY> berisi definisi menu dan daftar pilihan <SELECT>. Saat mouse melewati bilah menu, fungsi JavaScript showMenu dijalankan untuk menampilkan menu dan menyembunyikan daftar pilihan SELECT. Setelah mouse pergi, fungsi hideMnu menyembunyikan menu dan mengembalikan daftar pilihan. Fungsi JavaScript lainnya terutama digunakan untuk mensimulasikan tindakan menu. Saat mouse melewati item menu, menu ditampilkan dengan kecerahan tinggi (fungsi setStyle), dan saat mouse meninggalkan item menu, menu dikembalikan ke mode tampilan default. (fungsi setDefault). Efek berjalannya halaman ditunjukkan pada Gambar 2. Komentari pernyataan document.getElementById(lb_1).style.visibility=hidden di fungsi showMenu untuk melihat efeknya pada Gambar 1.
<deskripsi>
<img src=http://www.chinahtml.com/cce/img/553/04601t02.jpg>
</deskrip>
Singkatnya, akar penyebab elemen bentuk mengesampingkan elemen gaya terletak pada aturan prioritas tampilan default elemen HTML. Solusi yang diperkenalkan dalam artikel ini memang efektif, tetapi jika Anda benar-benar tidak ingin menggunakan metode ini, Anda harus mempertimbangkan untuk mengubah tata letak halaman untuk menghindari tumpang tindih area tampilan elemen bentuk dan elemen gaya.