绝对定位的div不随页面滚动

Question

从下面的示例中，我试图使“inner-navigation” div 绝对定位，以便它在“compare-display”框内保持固定。我遇到的问题是，当您滚动时，“inner-navigation” div 不会保持固定。如何解决这个问题？

以下是我的示例：

http://jsfiddle.net/Cd9eZ/

HTML 代码

<div class="compare-display">
    <div class="table">
        <div class="source-compare col-50">
            <div class="page"></div>
        </div>
        <div class="navigation-compare">
            <div class="inner-navigation"></div>
        </div>
        <div class="target-compare col-50">
            <div class="page"></div>
        </div>
    </div>
</div>

CSS 代码

.table {
    display: table;
    height: 100%;
    width: 100%;
}
.table > div {
    display: table-cell;
    vertical-align: top;
}
.table > .col-50 {
    width: 50%;
    background: green;
}
.compare-display {
    position: relative;
    overflow: auto;
    height: 200px;
}
.compare-display .navigation-compare {
    min-width: 50px;
    background: blue;

}
.compare-display .page {
    margin: 20px;
    height: 500px;
    background: orange;
}
.compare-display .inner-navigation {
    position: absolute;
    width: 50px;
    top: 0;
    bottom: 0;
    background: red;
}

- Vakey

Answer 1

你可能需要使用position:fixed而不是position:absolute。

Fiddle

CSS定位文档

- Dan-Nolan

---

我唯一觉得不理想的是，使用position: fixed时，你必须知道'.compare-display' div相对于文档的位置偏移量。所以如果它距离顶部200像素，你必须使用JavaScript来调整固定div的偏移量，使其恰好位于'.compare-display'上方。我只是希望能够在没有JavaScript的情况下实现这一点。但正如你在评论中解释的那样，这似乎是不可能的。感谢您的帮助！ - Vakey

你能否更新你的答案，解释为什么仅使用CSS不可能实现这个功能？或者提供JavaScript解决方案，使其在固定位置下工作，以便其他也在寻找相同解决方案的人可以轻松找到答案。 - Vakey

将一个固定的div包裹在“compare-display”周围，并从“compare-display”中删除相对位置。就像这样：http://jsfiddle.net/Cd9eZ/4/ - Vakey

由于我的声誉问题，我不能在接下来的6个小时内回答这个问题 X_X。 - Vakey

啊，使用包装元素上的固定位置是个好主意！当你提交答案时，我一定会投票支持你的回答。=） - Dan-Nolan

Answer 2

将一个固定的div包裹在“.compare-display”周围，并从“.compare-display”中移除相对位置。

就像这样：jsfiddle.net/Cd9eZ/4。

.compare-wrapper {
    position:fixed;
}

.compare-display {
    /*position: relative;*/
}

<div class="compare-wrapper">
    <div class="compare-display">...</div>
</div>

- Vakey

Answer 3

这是您想要的吗？

http://jsfiddle.net/Cd9eZ/3/

 .compare-display .inner-navigation {
   **position: fixed;**
   width: 50px;
   top: 0;
   bottom: 0;
   background: red;
 }

如果你想要导航固定在窗口上，绝对定位是行不通的。绝对定位并不会将元素从页面流中移除，所以滚动时绝对定位的元素总是会移动，因为参考框架是整个页面本身，而不是窗口。

固定定位的元素完全脱离了页面流，并且与窗口空间紧密相连。

- Thomas Cheney

---

这不是我想要的。我希望它相对于“.compare-display” div保持绝对定位。然而，我认为你部分回答了我的问题。也就是说，无法让绝对定位的div随滚动条滚动。 - Vakey