Jika anda suka menggunakan style z-indek untuk membuat layer pada suatu halaman, tentunya ketika layer belakang berupa tag select, maka select tersebut tak dapat ditutupi dan tetep muncul di layer paling atas meski z-index nya di kecilkan.
Hal ini terjadi di IE 6 dan versi oldernya. Nah untuk menyiasati agar tag select berada di belakang layer utama maka trik sederhananya dibelakang layer yang paling atas dibuat <iframe></iframe> jika dideteksi browser yang dipakai adalah IE 6 gunanya untuk menutupi tag select tadi tentunya diset lebih kecil dari layer yang paling atas.
Contoh :
Quick Code
<html>
<head>
<title>Bugs z-index</title>
<style type="text/css">
#adaSelect {
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
z-index:1;
}
#fixSelect {
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
z-index:3;
}
#fixSelect iframe {
position:absolute;
left:0px;
top:0px;
z-index:2;
filter:mask();
}
</style>
</head>
<body>
<div id="adaSelect">
isi select :
<select name="kota">
<option>Jakarta</option>
<option>Trenggalek</option>
<option>Malang</option>
</select>
</div>
<div id="fixSelect">
<table width="280" border="1" bgcolor="#CCCCCC" cellspacing="0" cellpadding="2">
<tr>
<td>No</td>
<td>Nama</td>
<td>No HP</td>
</tr>
<tr>
<td>1</td>
<td>Bambang Riadi</td>
<td>085678910</td>
</tr>
<tr>
<td>2</td>
<td>Nama kedua</td>
<td>0912898989</td>
</tr>
</table>
<!--[if lte IE 6.5]><iframe></iframe>< ![endif]-->
</div>
</body>
</html>
Karena id=”adaSelect” mempunyai z-index lebih kecil maka yang muncul di layar browser adalah id=”fixSelect”. Ini hanya bermasalah di IE 6 kebawah, IE 7 serta browser lain tak ada masalah dengan z-index pada elemen select.
Selamat mencoba…
