Advanced Search

jquery: simule z-index to place divs over select objects (explorer bug)

/ Published in: JavaScript
Save to your folder(s)
using bgiframe to solve a bug in explorer: you cannot apply z-index to place divs over selects in a form!!!

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. INSIDE THE HEAD
  2. ......................................................................
  3. <script type="text/javascript" src="http://brandonaaron.net/jquery/plugins/bgiframe/jquery.bgiframe.js"></script>
  4.  
  5. <script type="text/javascript">
  6.   $(function() {
  7.     $('#box').bgiframe();
  8.   });
  9. </script>
  10.  
  11. <style type="text/css" media="screen">
  12.   form { position: absolute; top: 0; left: 0; width: 100%; }
  13.   select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; }
  14.   .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; }
  15. </style>
  16.  
  17.  
  18. HTML
  19. ......................................................................
  20. <form action="#" method="get" accept-charset="utf-8">
  21.   <select name="test"><option>valor 1</option></select>
  22.   <select name="test"><option>valor 2</option></select>
  23.   <select name="test"><option>valor 3</option></select>
  24. </form>
  25. <div id="box" class="box">contenido del box</div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.