position:fixed, wenn Links/oben/rechts/unten nicht angegeben - gewünschte Ergebnisse in FF/IE, aber nicht in Safari

Haben leider bitten, noch ein weiteres position:fixed Verwandte Frage, aber das Lesen durch verschiedene andere Fragen und forum-threads hat mir nicht geholfen mit diesem ein.

Code, der folgt, ist eine vereinfachte Veranschaulichung, wie ich mit position:fixed in einem Projekt zu Datum. Meine ursprüngliche (fehl -) Verständnis von position:fixed ist, dass es zunächst fixes relativ zu der ersten übergeordneten container positioniert, und danach bleibt in dieser position unabhängig von der viewport scroll-position. Ich erkenne jetzt, dass ist falsch: in der Tat position:fixed Positionen relativ zu den äußersten container (d.h. die html tag) und der position:absolute Positionen relativ zu der ersten übergeordneten container, der eine andere position als static.

Lesen durch die verschiedenen Fragen auf, SO Stelle ich fest, dass der Effekt, den ich versucht hatte, Sie zu erreichen mit position:fixed ist eine, die viele andere Menschen haben es versucht, aber dann realisiert ist es nicht möglich nur mit CSS: Das ist, um die position eines Elements relativ zu einem container, aber dann haben Sie es bleiben, wo es ist, relativ zum viewport, wenn die Seite gescrollt wird.

Was mich verwirrt ist aber, dass das oben genannte ist genau das, was ich schien zu haben, erreicht - zumindest auf FF und IE8. Mit dem code-Beispiel unten die "festen rechten Bereich mit Inhalt" wird zunächst so positioniert, rechts den roten "Zentrum scrollable content" - box, und ist vertikal Ebene mit der Spitze des Zentrums Inhalt. Zentrum Inhalt kann gescrollt werden, aber die Rechte-hand-Inhalt bleibt, wo es ist, als ob es zunächst die Positionen statisch im normalen Belegfluss, aber danach bleibt fixiert auf den viewport.

Ich erkenne jetzt, dass dies erscheint, zur "Arbeit" im IE8 und FF, nur weil ich nicht angegeben top/bottom/left/right Attribute der fixed element. Wenn ich das Tue, dann erkenne ich, dass die fixed element wird sofort positioniert relativ zum viewport.

Hatte ich angenommen, vielleicht gefährlich - bis jetzt, dass, wenn die relative Positionen sind nicht angegeben, dann position:fixed wird standardmäßig Ort, element, wo es normalerweise statisch platziert. Zumindest FF und IE8 zu sein scheinen, genau das zu tun.

Tests in Safari, zeigt jedoch, dass Safari zu legen scheint, dass fixed element auf der linken Seite des Containers. In anderen Worten, ohne Positionierung, meine position:fixed element ist, weder wo er wäre, wenn statisch platziert, noch ist es bei 0,0 positioniert relativ zum viewport.

Habe ich verlassen uns auf sehr schlecht definiertes Verhalten zu Datum, und bin ich am besten den Rückgriff auf eine JavaScript-Lösung, nachdem alle zu erreichen, diese Feste Positionierung? Oder, ist dieses Verhalten gut definiert für IE /FF; und kann mir jemand erklären, die Logik hinter Safari Platzierung bitte?

HTML:

<style type="text/css">
  #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;
  }
</style>

<div id="content-centre">

  <div id="header">
  </div>

  <div id="left-pane">
    Fixed left pane content
  </div>


  <div id="main-pane">
    <div id="page-module-containers">

      <div id="container-1">
        <div class="side-info-list-fixer"> Fixed right pane content </div>
      </div>

      <div id="container-0">
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
        <p>Centre scrollable content</p>
      </div>

    </div>
  </div>

</div>