title: position:fixed when left/top/right/bottom aren't specified - desired results in FF/IE, but not in Safari
body: <p>Sorry to have to ask yet another <code>position:fixed</code> related question, but reading through various other questions and forum threads hasn't helped me with this one. </p>
  
  <p>The code that follows is a simplified demonstration of how I have been using <code>position:fixed</code> in a project to date. My original (mis)understanding of <code>position:fixed</code> is that it initially fixes relative to the first positioned parent container, and thereafter remains in that position regardless of viewport scroll position. I now realise that is wrong: in fact, <code>position:fixed</code> positions relative to the outermost container (i.e. the <code>html</code> tag) and <code>position:absolute</code> positions relative to the first parent container that has a position other than <code>static</code>. </p>
  
  <p>Reading through various other questions on SO, I realise that the effect I was trying to achieve using <code>position:fixed</code> is one that many other people have tried to, but then realised is not possible with just CSS: That is, to position an element relative to a container, but then have it stay where it is relative to viewport when the page is scrolled. </p>
  
  <p>What confuses me though is that the above is exactly what I seemed to have achieved - at least on FF and IE8. With the code example below, the "fixed right pane content" is initially positioned to the right of the red "centre scrollable content" box, and is vertically level with the top of the centre content. The centre content can be scrolled, but the right-hand content stays where it is, as if it initially positions statically in normal document flow but thereafter remains fixed to the viewport.</p>
  
  <p>I now realise that this appears to 'work' in IE8 and FF simply because I have not specified <code>top</code>/<code>bottom</code>/<code>left</code>/<code>right</code> attributes to the <code>fixed</code> element. If I do, then I realise that the <code>fixed</code> element immediately becomes positioned relative to the viewport. </p>
  
  <p>I had assumed - perhaps dangerously - until now that if relative positions aren't specified, then <code>position:fixed</code> will by default place that element where it would normally be statically placed. At least FF and IE8 seem to be doing just that. </p>
  
  <p>Testing in Safari, however, shows that Safari seems to place that <code>fixed</code> element to the left of its container. In other words, without positioning, my <code>position:fixed</code> element is neither where it would be when statically placed, nor is it positioned at 0,0 relative to the viewport. </p>
  
  <p>Have I been relying on very poorly defined behaviour to date, and am I best resorting to a JavaScript solution after all to achieve this fixed positioning? Or, is this behaviour well-defined for IE / FF; and can someone explain the logic behind Safari's placement please?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style type="text/css"&gt;
    #content-centre {
      margin: 0 auto;
      width: 900px;
    }
    
    #header {
      height: 55px;
      position: fixed;
      top: 0;
      width: 990px;
    }
    
    #left-pane {
      position: fixed;
      top: 12px;
      border: 1px green solid;
    }
    
    #main-pane {
      left: 200px;
      position: relative;
      top: 66px;
      width: 760px;
      border: 1px yellow solid;
    }
    
    #container-1 {
      border-top: 1px solid #FFFFFF;
      float: right;
      min-width: 130px;
      padding-left: 20px;
      border: 1px blue solid;
    }
    
    #container-0 {
      margin-right: 20px;
      min-height: 470px;
      overflow: auto;
      padding: 10px 0;
      position: relative;
      border: 1px red solid;
    }
    
    .side-info-list-fixer {
      position: fixed;
    }
  &lt;/style&gt;
  
  &lt;div id="content-centre"&gt;
  
    &lt;div id="header"&gt;
    &lt;/div&gt;
  
    &lt;div id="left-pane"&gt;
      Fixed left pane content
    &lt;/div&gt;
  
  
    &lt;div id="main-pane"&gt;
      &lt;div id="page-module-containers"&gt;
  
        &lt;div id="container-1"&gt;
          &lt;div class="side-info-list-fixer"&gt; Fixed right pane content &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="container-0"&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
          &lt;p&gt;Centre scrollable content&lt;/p&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>