Absolute div does not scroll with page

absolute, css, html, position

Solution

Wrap a fixed div around '.compare-display' and remove the relative position from '.compare-display'.

Like so:

jsfiddle.net/Cd9eZ/4

.compare-wrapper {
    position:fixed;
}

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

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

Problem

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? Here is my fiddle: http://jsfiddle.net/Cd9eZ/ 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; } ```

Original source