从下面的小提琴,我试图让’内部导航’div绝对定位,以便它固定在’比较显示’框内.我遇到的问题是,当你滚动时,’内部导航’div不会保持固定.我该如何解决这个问题？
这是我的小提琴：
<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;
}
解决方法
认为你想要的位置：固定而不是位置：绝对.
