jquery:simule z-index将div放置在选定对象上（explorer bug）

Posted 2021-02-27

using bgiframe to solve a bug in explorer: you cannot apply z-index to place divs over selects in a form!!!

INSIDE THE HEAD
......................................................................
<script type="text/javascript" src="http://brandonaaron.net/jquery/plugins/bgiframe/jquery.bgiframe.js"></script>
 
<script type="text/javascript">
  $(function() {
    $('#box').bgiframe();
  });
</script>
 
<style type="text/css" media="screen">
  form { position: absolute; top: 0; left: 0; width: 100%; }
  select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; }
  .box { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; }
</style>
 
 
html
......................................................................
<form action="#" method="get" accept-charset="utf-8">
  <select name="test"><option>valor 1</option></select>
  <select name="test"><option>valor 2</option></select>
  <select name="test"><option>valor 3</option></select>
</form>
<div id="box" class="box">contenido del box</div>