title: jQuery: how to position/animate an absolutely positioned element relative to another element
body: <p>So, I am trying to create a vertical navigation menu that includes a stack (rows) of navigation items. When one of these rows is selected, I want a menu to slide out from above (and beneath) and when the top of this sub menu reaches the bottom of the row that was clicked. These sub menus should also have a starting position where the sub menu bottom is equal to the related navigation item bottom, so that upon animate downward, it is immediately visible. </p>
  
  <p>This positioning, the stop and start points, can be seen in this fiddle ->  <a href="http://jsfiddle.net/pGfCX/57/" rel="nofollow">http://jsfiddle.net/pGfCX/57/</a>. Just take note of the start and end points. The rest of the fiddle is broken due to the nature of position:relative. </p>
  
  <p>I thought that z-index could fix the pushing of the subsequent navigation items (as you can see in the fiddle just linked)... however that doesn't seem to work. It looks like only position:absolute will enable the proper overlapping (i.e. sub menu hides beneath the elements above it and covers those below it). Unfortunately, this has it's faults as well. As you can see in this fiddle: <a href="http://jsfiddle.net/pGfCX/60/" rel="nofollow">http://jsfiddle.net/pGfCX/60/</a>. You will notice that the starting position and ending position is always the same because I'm using the same class every time. Although I could specifically position every single sub menu as it's own unique ID, that would be very inefficient and difficult to maintain.</p>
  
  <p>Bsically, I need a mix of the two approaches... relative positioning for the start/end positions and absolute to enable the proper overlapping.</p>
  
  <p>Hopefully this makes sense... I really need help. I'm stuck with the two approaches and neither working. It's frustrating. </p>
  
  <p>Here is my current jQuery code:</p>
  
  <pre><code>$('.row').click(function() {
  
      // make all siblings AFTER row clicked get this class to reduce z-index and allow the menu to display above these rows (while still remaining below the rows above)
  
      $(this).nextAll().addClass('rowZ');
      $(this).next('.menu').show()
      $(this).next('.menu').animate({'top':'0'});
  
  });
  
  // when menu is out, the row clicked is the header row, upon clicking this, the related menu (and by default, all subsequent menus within) animate back up and hide
  
  $('.rowHead').click(function() {
  
      $(this).next('.menu').animate({'top':'-100%'});
      $(this).next('.menu').hide();
  
  });
  </code></pre>
  
  <p>Any and all help is greatly appreciated. Thanks!</p>
  
  <p><strong>EDIT*</strong> New approach... menu within the navigational item, to allow it to have absolute positioning and be relative to the navigational item. However, the z-index seems off (i.e. it's animating over top the navigational item (it's parent) though the z-index would suggest otherwise:</p>
  
  <p><a href="http://jsfiddle.net/pGfCX/81/" rel="nofollow">http://jsfiddle.net/pGfCX/81/</a></p>