It seems IE7 and IE8 give each element within a document an increasing z-index automatically, based on the position of where the element shows up in the flow of the HTML. This is a problem if you are using something like a drop down menu and it needs to cover the contents of the elements below it. While this will work perfectly in Firefox and Chrome (unsure about other browsers), in IE 7 and 8 it simply fails to allow a floating div that appears first within the HTML to show above elements that are relatively placed that appear further down the markup.

If you are using jQuery, the fix is rather simple - the following code reverses the natural z-indexing that is generated and assures that elements higher in the page will actually have a higher z-index then elements appearing lower:

  1. $(document).ready(function()
  2. {
  3.     $(function()
  4.     {
  5.         var zIndexNumber = 1000;
  6.         $(’div’).each(function()
  7.         {
  8.             $(this).css(’zIndex’, zIndexNumber);
  9.             zIndexNumber -= 10;
  10.         });
  11.     });
  12. });

Additionally here is a fix using MooTools 1.2:

  1. if (Browser.Engine.trident)
  2.     {
  3.     var zIndexNumber = 1000;
  4.     $$(’div’).each(function(el,i)
  5.     {
  6.         el.setStyle(’z-index’,zIndexNumber);
  7.         zIndexNumber -= 10;
  8.     });
  9. };

Via: http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/