Had you ever experienced the IE6 z-index bug where a simple select box will always take priority over any predefined z-indices and always show up on top? Ever annoyed to make a floating dialog only to have a select box underneath popup and ruin the dialog? Well you’re not alone…
I’m in your divs, ruining your z-index
Fortunately, there is a fix for this bug. By using an iframe and expanding it over the select box area, the iframe will take precendence over the select box. However, implementing this iframe hack alone can be quite a bit of a hassle.
Thankfully, there is alread a jQuery plugin that will automatically create the iframe for you. The plugin is simply called bgiframe and using it is quick and easy. Just include the script and attach the bgiframe() method to all of your floating layers. Here is a short and quick example:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bgiframe.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#floating_div').bgiframe();
}
</script>
</head>
<body>
<select>
<option>Test</option>
</select>
<div id="floating_div">I'm over this select box</div>
</body>Now those nasty z-index bugs won’t ever trouble you ever again.
Download:
bgiframe Plugin Page
