Below, I am attempting to fix the position of the 'inner-navigation' div within the 'compare-display' box by making it absolutely positioned. However, when scrolling, the 'inner-navigation' div is not staying fixed. How can I solve this issue?
View my fiddle here:
HTML Code
<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
.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;
}