Fixed position relative to parent container
I did a lot of research on this but apparently it's not possible with pure html/css as position:fixed only fixes it to browser window, so I thought I'd ask in this section.
I have a page container, and inside it are two sections. The left section is a vertical nav bar with some links, while the right section is the actual page content. I want the right side to be scrollable, but the left side to be fixed to the page container (ie won't scroll when I scroll that page), but be able to move when I scroll the entire browser window.
I've already tried to set #pagecontainer and #linkspage to position:relative, and .sidelinks to position:absolute, that doesn't do anything as far as I can tell... or it just doesn't do what I want.
<div class="sidelinks"> <!--UNSCROLLABLE-->
<a href="#page1" class="link">Link 1</a>
<a href="#page2" class="link">Link 2</a>
<a href="#page3" class="link">Link 3</a>
<a href="#page4" class="link">Link 4</a>
<div class="linkscontent"> <!--SCROLLABLE-->
content of links page
Here's a picture: