title: Javascript Overlapping, Set Z order of Jquery
body: <p>Ok I'm stuck. I am using opencart, and I have added the jquery zoom plugin so that the images can be magnified.</p>
  
  <p>Since doing this it is now conflicting with the menu, I cant figure out what to do?</p>
  
  <p>Is there any sort of way of setting a sort order of the jquery on the page. I have tried the JQuery topZIndex plugin but this failed to work.</p>
  
  <p>PS: I am using the <code>z-index</code> in the css also.</p>
  
  <p>I have tried:</p>
  
  <pre><code>#menu &gt; ul &gt; li {
  position: relative; i also tried absolute
  float: left;
  z-index: 100;   
  }
  </code></pre>
  
  <p>For the jqzoom I am using: </p>
  
  <pre><code>$(function() {
  var options =
          {
              zoomType: 'innerzoom',
              zoomWidth: 800,
              zoomHeight: 400,
              showEffect:'fadeout',
              hideEffect:'fadeout',
              fadeoutSpeed: 'slow',
              preloadImages: 'true',
              preloadText: 'Loading...'
  
          }
  
  $(".jqzoom").jqzoom(options);
    });
  </code></pre>
  
  <p>My problem is that the dropdown menu should go over the jqzoom image, however the drop down menu appears behind the jqzoom image. I was wondering if there is a means to set a <code>z-index</code> to jquery to set it to the back or something?</p>
  
  <p>I have tried playing with the topZIndex() jquery plugin and used <code>$(".jqzoom").topZIndex( { increment: 0 } );</code> and <code>$(".jqzoom").topZIndex( { increment: 100 } );</code></p>
  
  <p>The javascript for the menu is:</p>
  
  <pre><code>$('#menu ul &gt; li &gt; a + div').each(function(index, element) {
      // IE6 &amp; IE7 Fixes
      if ($.browser.msie &amp;&amp; ($.browser.version == 7 || $.browser.version == 6)) {
          var category = $(element).find('a');
          var columns = $(element).find('ul').length;
  
          $(element).css('width', (columns * 143) + 'px');
          $(element).find('ul').css('float', 'left');
      }       
  
      var menu = $('#menu').offset();
      var dropdown = $(this).parent().offset();
  
      i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
  
      if (i &gt; 0) {
          $(this).css('margin-left', '-' + (i + 5) + 'px');
      }
  });
  
  // IE6 &amp; IE7 Fixes
  if ($.browser.msie) {
      if ($.browser.version &lt;= 6) {
          $('#column-left + #column-right + #content, #column-left + #content').css('margin-left', '195px');
  
          $('#column-right + #content').css('margin-right', '195px');
  
          $('.box-category ul li a.active + ul').css('display', 'block'); 
      }
  
      if ($.browser.version &lt;= 7) {
          $('#menu &gt; ul &gt; li').bind('mouseover', function() {
              $(this).addClass('active');
          });
  
          $('#menu &gt; ul &gt; li').bind('mouseout', function() {
              $(this).removeClass('active');
          }); 
      }
  }
  
  $('.success img, .warning img, .attention img, .information img').live('click', function() {
      $(this).parent().fadeOut('slow', function() {
          $(this).remove();
      });
  }); 
  });
  </code></pre>