title: css "fixed" child element positions relative to parent element not to the viewport, why?
body: <p>I'm developing a wordpress theme, with an isotope grid and where a hover on a post should display its title with a fixed position on the bottom of the browser. I have this simplified structure:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;article class="hubbub"&gt;
          //article content
      &lt;h2 class="subtitled"&gt;
          //h2 content
      &lt;/h2&gt;
      &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Via jQuery, a hover on <code>&lt;article&gt;</code> should display its child element <code>h2.subtitled</code>. <code>&lt;article&gt;</code> is positioned relative, but gets an absolute position by the isotope script. The <code>h2.subtitled</code> is positioned fixed with:</p>
  
  <pre><code>.subtitled {
              display: none;
              position: fixed;
              z-index: 999999999;
              bottom: 20px;
              left: 0;
              width: 100%;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 42px;
              text-align: center;
              color: yellow;
  }
  </code></pre>
  
  <p>For some reason, the <code>h2.subtitle</code> elements get positioned fixed related to the parent <code>&lt;article&gt;</code> element, so an the bottom of each <code>&lt;article&gt;</code>. If I set the <code>&lt;h2&gt;</code> outside of the <code>&lt;article&gt;</code>, it is positioned fixed related to the browser, but they need to be inside of the <code>&lt;article&gt;</code> element, because an infinite scroll appends the new <code>&lt;article&gt;</code> elements and they should as well contain the <code>&lt;h2&gt;</code> titles.</p>
  
  <p>Does anyone know, how to make this position fixed and related to the browser window?</p>
  
  <p>Thanks!</p>