Il div assoluto non scorre con la pagina

Question

Dal violino in basso, sto cercando di posizionare il div "inner-navigation" in modo assoluto in modo da rimanere fisso all'interno della casella 'compare-display'. Il problema che sto avendo è che quando si scorre, il div "inner-navigation" non rimane fisso. Come posso risolvere questo problema?

Ecco il mio violino:

http://jsfiddle.net/Cd9eZ/

codice 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> 

codice 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; 
} 

Answer 1

Avvolgere un div fisso attorno a '.compare-display' e rimuovere la posizione relativa da '.compare-display'.

Come così:

jsfiddle.net/Cd9eZ/4

.compare-wrapper { 
    position:fixed; 
} 

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

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

Answer 2

pensa che si desidera position:fixed piuttosto che position:absolute.

Fiddle

CSS Position Documentation

Answer 3

era questo quello che intendeva?

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

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

Se si desidera che la navigazione apposto alla finestra, in assoluto non funzionerà. Absolute non rimuove l'elemento dal flusso della pagina, quindi lo scorrimento sposta sempre un elemento posizionato in modo assoluto perché il fotogramma di riferimento è la pagina stessa e non la finestra .

Gli elementi fissi vengono rimossi completamente dal flusso della pagina e sono collegati allo spazio della finestra stesso.