Fixing-Position relativ zum übergeordneten div

Question

Ist es möglich, die Position eines Elements relativ zum übergeordneten div zu fixieren, nicht das Browserfenster?

Sagen, ich habe:

<div id="pagecontainer"> 

    <div id="linkspage"> 

     <div class="sidelinks"> 
      <a href="#page1" class="link">Link 1</a> 
      <p> 
      <a href="#page2" class="link">Link 2</a> 
      <p> 
      <a href="#page3" class="link">Link 3</a> 
      <p> 
      <a href="#page4" class="link">Link 4</a> 
      <p> 
     </div> 

     <div class="linkscontent"> 
      content of links page 
     </div> 

    </div> 

    //OTHER PAGES 

</div> 

Im Grunde eine Seite mit zwei Abschnitten, der linke Abschnitt eine Liste von Links ist, während der rechte Abschnitt des Seiteninhalt ist. Ich möchte, dass der Inhalt scrollbar ist, aber die Links so bleiben, dass sie beim #pagecontainer verbleiben, damit sie nicht scrollen, wenn #pagecontainer scrollt, aber sie werden sich bewegen, wenn ich das gesamte Browserfenster durchblättere.

Ich habe bereits versucht, die JQuery "Fix" Plugin: https://github.com/bbarakaci/fixto. Aber ich kann das nicht verwenden, da meine Seiten ein- und ausgeblendet werden und das Skript ausfällt, wenn das Elternelement (#pagecontainer) ein Alpha von 0 hat, es denkt, dass das Elternelement weg ist und nirgends repariert werden kann.

Danke.

Answer 1

Geben Sie das übergeordnete position: relative, wie folgt aus:

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 0; 
} 

DEMO See.

Answer 2

Ich habe diese CodePen für Sie erstellt.

Von Ihrer Beschreibung ist es auf halbem Weg.

aber sie werden sich bewegen, wenn ich das gesamte Browserfenster scrollte.

Sie iframe oder irgendeine Art von JavaScript-Lösung verwenden müssen.