绝对div不会滚动页面

Question

从下面的小提琴,我试图让'内部导航'div绝对定位,以便它固定在'比较显示'框内.我遇到的问题是,当你滚动时,'内部导航'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;
}

Answer 1

认为你想要position:fixed而不是position:absolute.

小提琴

CSS职位文档

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>