Html 绝对 div 不随页面滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18342967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute div does not scroll with page
提问by Vakey
From the fiddle below, I am trying to make the 'inner-navigation' div absolutely positioned so it stays fixed within the 'compare-display' box. The problem I am having is that when you scroll, the 'inner-navigation' div does not stay fixed. How can I remedy this problem?
从下面的小提琴，我试图使“内部导航”div 绝对定位，以便它在“比较显示”框中保持固定。我遇到的问题是，当您滚动时，“内部导航”div 不会保持固定。我该如何解决这个问题？
Here is my fiddle:
这是我的小提琴：
HTML Code
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 Code
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;
}
采纳答案by Vakey
Wrap a fixed div around '.compare-display' and remove the relative position from '.compare-display'.
在'.compare-display' 周围包裹一个固定的div 并从'.compare-display' 中移除相对位置。
Like so:
像这样：
.compare-wrapper {
position:fixed;
}
.compare-display {
/*position: relative;*/
}
<div class="compare-wrapper">
<div class="compare-display">...</div>
</div>
回答by Dan-Nolan
Think you want position:fixedrather than position:absolute.
认为你想要position:fixed而不是position:absolute。
回答by Thomas Cheney
Was this what you intended?
这是你的本意吗？
.compare-display .inner-navigation {
**position: fixed;**
width: 50px;
top: 0;
bottom: 0;
background: red;
}
If you want the navigation affixed to the window, absolute will not work. Absolute does not remove the element from the page flow, so scrolling will always move an absolutely positioned element because the frame of reference is the pageitself, and not the window.
如果你想把导航贴在窗口上，absolute 是行不通的。Absolute 不会从页面流中删除元素，因此滚动将始终移动绝对定位的元素，因为参考框架是页面本身，而不是window。
Fixed elements are removed from the page flow entirely and are rooted to the window space itself.
固定元素从页面流中完全移除，并植根于窗口空间本身。
