title: Absolute positioned div sticking out of a scrollable fixed position div
body: <p>I have a page with a fixed scrollable sidebar. When hovering one of the buttons in the sidebar I want to show a popup/tooltip beside the button. The tooltip however is larger than the sidebar, so it needs to stick out from it.</p>
  
  <p>That is where the problem start. I can't get the tooltip to go outside the fixed container. It is cut when it reaches the edge of the sidebar.</p>
  
  <p>This appears to have something to do with it being scrollable. If I remove overflow-y: scroll from the sidebar the tooltip starts to work, but when it is scrollable it does not. The same happens both if I just move the sidebar to the right using margins, and if I absolutely position it based on the element you hovered.</p>
  
  <p>If I make the tooltip fixed it works, until I start to scroll the sidebar and the tooltip does not follow. The tooltip is fixed based on the starting position, not the current position.</p>
  
  <p>Here is a fiddle showing the three cases:
  <a href="http://jsfiddle.net/8VF22/2/" rel="nofollow">http://jsfiddle.net/8VF22/2/</a></p>
  
  <p>Basic html and css:</p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="sidebar"&gt;
          &lt;div class="button"&gt;Hover me
              &lt;div class="tooltip"&gt;This tooltip hates my life and won't go outside the sidebar&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>-</p>
  
  <pre><code>.sidebar {
      position: fixed;
      height: 100%;
      overflow-y: scroll;
  }
  </code></pre>
  
  <p>So how to go about this? Is there anyway to get something to show outside a scrollable fixed container and keep it aligned with the sidebar when you scroll.</p>