Css 绝对div不随页面滚动

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

这是我的小提琴：

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>

---

认为您想要的是

位置：固定

而不是

位置：绝对

---

这是你想要的吗

如果要将导航粘贴到窗口上，则“绝对”将不起作用。绝对不会从页面流中删除元素，因此滚动将始终移动绝对定位的元素，因为参考框架是页面本身，而不是窗口

---

固定元素将完全从页面流中删除，并根到窗口空间本身

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

像这样：

。比较包装器{
位置：固定；
}
.比较显示{
/*位置：相对位置*/
}
...

我希望它相对于“.compare display”div被固定。fixed将它从div中推出，并使其相对于文档。Hmm。。这是一个有趣的想法。不幸的是，我没有一个CSS解决方案来反映你的想法。由于

内部导航

div是其父级HTML内容的一部分，因此只能相对于其父级内容定位它。在这种情况下，

compare display

类有溢出，所以它的所有相关内容都是可滚动的。

position:fixed

属性是否有任何不需要的特殊行为？我发现position fixed唯一不需要的是，您必须知道“.compare display”div与文档本身的位置偏移量是多少。因此，如果它位于距离顶部200px的位置，则必须使用javascript来偏移固定div，以便它正好位于“.compare display”的顶部。我只是希望能够在没有javascript的情况下做到这一点。但正如你在评论中解释的那样，这似乎是不可能的。谢谢你的帮助！你能更新你的答案来解释为什么仅仅使用CSS是不可能的吗？也许可以提供javascript解决方案，使这项工作有一个固定的位置，让其他人谁也希望做同样的事情可以很容易地找到答案，这不是我想要的。我希望它相对于“.compare display”div保持绝对位置。但是，我认为您已经部分回答了我的问题。也就是说，不可能用滚动条将绝对定位的div滚动。

.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;
}

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

.compare-wrapper {
    position:fixed;
}

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

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