css - 绝对div不随页面滚动

Question

从下面的 fiddle 中，我试图使“内部导航”div 绝对定位，以便它固定在“比较显示”框中。我遇到的问题是，当您滚动时，“内部导航”div 不会保持固定。我该如何解决这个问题？

这是我的 fiddle :

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。

Fiddle

CSS Position Documentation