title: Position:fixed element within a position:relative parent. Which browser renders correctly?
body: <p>I am seeing a discrepancy in how fixed position elements behave within a relatively positioned parent.  According to the docs I am finding online, FireFox and Chrome should fix the element to the viewport and not the parent.  However, I am finding that if I do not specify a left/right value on a fixed element, it behaves in a sort of mix between static AND fixed, in the sense that it's fixed vertically to the viewport, but moves as if it were a static element within the parent element.  I can't find any official/respected documentation surrounding these conditions.  They all basically state something like the following:</p>
  
  <blockquote>
    <p><strong>Fixed Positioning</strong>
    Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.</p>
  </blockquote>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" rel="noreferrer">Source</a></p>
  
  <p>Safari on the other hand, seems to render it as it is described where it's fixed purely to the viewport, no matter if I set a parent element to relative without any top/right/bottom/left properties defined.  Try it out in Safari if you have a chance by clicking on the teal div which positions it -100 pixels from the left.  The yellow bar will stay fixed to the viewport:</p>
  
  <p><a href="http://jsfiddle.net/bbL8Lh4r/2/" rel="noreferrer">http://jsfiddle.net/bbL8Lh4r/2/</a></p>
  
  <p>So which browser is rendering this correctly?  All my browsers have been updated to the latest.  At first I thought Safari was the right one just by reading the docs, but FireFox and Chrome both share the same different view where it seems to be a hybrid between static and fixed.</p>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;aside&gt;
          Blah
      &lt;/aside&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="nav"&gt;
              BLARGH
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body,
  aside,
  .container,
  .nav {
      margin:0;
      padding:0;
  }
  
  aside {
      background:red;
      width:30%;
      height:800px;
      float:left;
  }
  
  .container {
      position:relative;
      height:800px;
      width:70%;
      background:teal;
      float:right;
  }
  
  .container.stickied {
      left:-100px;
  }
  
  .container .nav {
      position:fixed;
      background:yellow;
      width:inherit;
  }
  </code></pre>