css - 绝对 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

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

像这样：

jsfiddle.net/Cd9eZ/4

.compare-wrapper {
    position:fixed;
}

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

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

Answer 3

这是你的本意吗？

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

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

如果你想把导航贴在窗口上，absolute 是行不通的。Absolute 不会从页面流中删除元素，因此滚动将始终移动绝对定位的元素，因为参考框架是页面本身，而不是window。

固定元素完全从页面流中移除，并植根于窗口空间本身。