相对于父级div固定位置的修复方法

Question

你可以将元素的位置固定在父div中，而不是浏览器窗口中吗?

比如说我有：

<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>

基本上是一个页面分为两个部分，左侧是链接列表，右侧是页面内容。我希望内容可以滚动，但是链接保持固定在父元素#pagecontainer中，这样当#pagecontainer滚动时它们不会滚动，但当我滚动整个浏览器窗口时它们会移动。

我已经尝试了JQuery的“fixto”插件：https://github.com/bbarakaci/fixto。但我不能使用它，因为我的页面淡入/淡出，当父元素(#pagecontainer)的透明度为0时，脚本就会出错，它认为父元素消失了，无处可依附。

谢谢。

- Windbrand

Answer 1

将父元素的 position: relative，修改为如下：

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

查看 DEMO。

- zxqx

---

它不起作用。我已经尝试将#pagecontainer和#linkspage都设置为相对定位，只将#pagecontainer设置为相对定位，只将#linkspage设置为相对定位，并将.sidelinks设置为绝对定位，但什么都不起作用。 - Windbrand

Answer 2

我已经为您创建了CodePen。

根据您的描述，它已经完成了一半。

但是当我滚动整个浏览器窗口时，它们会移动。您需要使用iframe或某种JavaScript解决方案。

- Alen