title: CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)
body: <p>I have this project: <a href="http://jsfiddle.net/dmzq1938/3/" rel="nofollow">http://jsfiddle.net/dmzq1938/3/</a>. The generated stuff is a little messy, but it's the hovered elements I'm interested in anyway.</p>
  
  <p>In the fiddle, if you hover over one of the Blue/Green/Grey rectangles in the top row, you can see what the issue is. But if you hover over one on the bottom row, you can see how it <em>should</em> look.</p>
  
  <p>I understand the whole Z-Index relying on it's parent's relationship with it's siblings and I have tried making it so that on hover it makes the whole row a z-index above the others, however the problem then becomes that you can have one clicked on, and hover over another at the same time so you have a row overlapping.</p>
  
  <p>What I want is to be able to click and/or hover over the boxes and the tooltip bubble to appear over the top of all the boxes. Ideally without having to put all the tooltips on the same level as the whole row!</p>
  
  <p>For Completeness sake:</p>
  
  <p>JS</p>
  
  <pre><code>$(document).on('click', '.routetimeline .bars &gt; div.stop, .routetimeline .bars &gt; div.driving, .routetimeline .bars &gt; div.break', function () {
      var AllDivs = $('.routetimeline .bars &gt; div');
      AllDivs.removeClass('selected');
      var AllBalloons = $('.routetimeline .bars div.balloon');
      AllBalloons.hide();
      AllBalloons.css('box-shadow', '0');
      var ThisDiv = $(this);
      var ThisBar = ThisDiv.parent();
      var ThisBalloon = ThisDiv.next('.balloon');
      if (ThisDiv.hasClass('selected')) {
          ThisDiv.css('z-index', 'auto');
          ThisDiv.removeClass('selected');
          ThisBalloon.hide();
          ThisBalloon.css('box-shadow', '0');
      } else {
          ThisDiv.css('z-index', '100');
          ThisDiv.addClass('selected');
          ThisBalloon.show();
          ThisBalloon.css('box-shadow', '1px 1px 2px 1px #7A7A7A');
      }
  });
  $(document).on('mouseenter', '.routetimeline .bars &gt; div.stop, .routetimeline .bars &gt; div.driving, .routetimeline .bars &gt; div.break', function () {
      var ThisDiv = $(this);
      if (!ThisDiv.hasClass('selected')) {
          ThisDiv.css('z-index', '100');
          var ThisBalloon = ThisDiv.next('.balloon');
          ThisBalloon.show();
          ThisBalloon.css('box-shadow', '1px 1px 2px 1px #7A7A7A');
      }
  });
  $(document).on('mouseleave', '.routetimeline .bars &gt; div.stop, .routetimeline .bars &gt; div.driving, .routetimeline .bars &gt; div.break', function () {
      var ThisDiv = $(this);
      if (!ThisDiv.hasClass('selected')) {
          ThisDiv.css('z-index', 'auto');
          var ThisBalloon = ThisDiv.next('.balloon');
          ThisBalloon.hide();
          ThisBalloon.css('box-shadow', '0');
      }
  });
  </code></pre>
  
  <p>I am quite aware I might be asking for the impossible, because logically it is. All "Outside-the-box" attempts considered!</p>