Absolute div does not scroll page

Question

From the scripts below, I try to make the "internal navigation" absolutely motionless, so it remains fixed in the "compare-display" field. The problem I am facing is that when you scroll, the “inner navigation” div does not remain fixed. How can I fix 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; } 

Answer 1

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

Same:

jsfiddle.net/Cd9eZ/4

 .compare-wrapper { position:fixed; } .compare-display { /*position: relative;*/ } <div class="compare-wrapper"> <div class="compare-display">...</div> </div> 

Answer 2

Think that you want position:fixed , not position:absolute .

Fiddle

CSS position documentation

Answer 3

Was this what you intended?

http://jsfiddle.net/Cd9eZ/3/

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

If you want the navigation to be attached to the window, the absolute value will not work. Absolute does not remove an element from the page stream, so scrolling will always move an absolutely positioned element, because the link frame is the page itself, not the window.

Fixed elements are completely removed from the page stream and tied to the window space itself.