title: CSS - fixed element inside relative element : positioning bug?
body: <p>I ran into a problem with a pretty weird configuration.</p>
  
  <p>Working situation :</p>
  
  <p>I have a basic container / content set up, with container filling up the full body, and the content with a fixed <code>width</code>, position in the middle with <code>margin: auto</code>.</p>
  
  <p>Inside this content, I have a <code>links-container</code> element containing a <code>link</code> element containing my links.</p>
  
  <p>This <code>links-container</code> element is <code>position: fixed</code>.
  And the <code>link</code> is <code>position: relative</code> with an offset : <code>right: 'size'</code> to make links look outside of the container.</p>
  
  <p>Bug :</p>
  
  <p>For some pages, I need the content to slide to the right : <code>left: 50px</code>.<br>
  But for some reason, on Firefox, the links will stay close to the content, while on Chrome, they will stay at the same place.</p>
  
  <p>You can see the bug <a href="http://cssdesk.com/TfQqF" rel="nofollow">here</a>, and the code below.</p>
  
  <p>Is this a bug, or am I missing something ?</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class='container'&gt;
    &lt;div class='content'&gt;
      &lt;div class='links-container'&gt;
        &lt;div class='links'&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>body {
    padding: 100px;
  }
  
  .container {
    width: 100%;
    height: 100%;
  }
  
  .content {
    width: 500px;
    height: 300px;
    background: red;
    position: relative;
    margin: auto;
    background: red;
    left: 50px;
  }
  
  .links-container {
    position: fixed;
  }
  
  .links {
    position: relative;
    background: yellow;
    width: 50px;
    height: 50px;
    right: 50px;
  }
  </code></pre>