title: Relative parent with overflow: hidden, fixed child does not obey
body: <p>I am trying to create a <code>relative</code>-positioned element with <code>overflow:hidden</code> that contains a few <code>fixed</code>-position elements. The goal is to have the <code>fixed</code> child elements become hidden as the parent element moves, sort of like if they were part of a <code>background-image</code> with <code>attachment:fixed</code> on the parent element.</p>
  
  <p>By all accounts on StackOverflow and elsewhere on the web, this is not possible, because a fixed element only regards the browser window and ignores its parent element. However, for whatever reason it actually works as intended in Chrome  only: <a href="http://jsfiddle.net/x6avvhuf/" rel="nofollow">http://jsfiddle.net/x6avvhuf/</a></p>
  
  <p>Here's what the fiddle looks like, view it in Chrome vs. IE/Firefox to see the difference:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id = "headwrapper"&gt;
      I am the relative parent element
      &lt;div class = "fixedchild"&gt;
          I am a fixed child element
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id = "content"&gt;
      This is the main content portion of the page&lt;br&gt;
      &lt;!-- Repeat until the page scrolls --&gt;
      This is the main content portion of the page&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>body {
     background-color: yellow;
  }
  
  #headwrapper {
      position: relative;
      height: 300px;
      width: 100%;
      overflow: hidden;
      z-index: -1;
      background-color: black;
      color: white;
      text-align: center;
  }
  
  .fixedchild {
      position: fixed;
      width: 75%;
      height: 40px;
      z-index: 48;
      top: 22.5%;
      left: 50%;
      margin: 0 0 0 -37.5%;
      text-align: center;
      color: red;
      background-color: pink;
  }
  </code></pre>
  
  <p>What is an alternative solution for this? I have read that it is possible to make an <code>absolute</code> element behave like a <code>fixed</code> element with CSS, but I have been unable to make this work so far. Thanks in advance for any help or advice! :)</p>