Podziałka bezwzględna nie jest przewijana ze stroną

Question

Z poniższego skrzypca próbuję ustawić pozycję "wewnętrzna nawigacja" absolutnie ustawioną tak, aby była ustawiona w polu "porównaj-wyświetl". Problem, który mam, polega na tym, że kiedy przewijasz, div "nawigacji wewnętrznej" nie jest stały. Jak mogę zaradzić temu problemowi?

Oto moje skrzypce:

http://jsfiddle.net/Cd9eZ/

HTML kod

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

.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

Zawiń ustalony element div wokół ".compare-display" i usuń względną pozycję z ".compare-display".

tak:

jsfiddle.net/Cd9eZ/4

.compare-wrapper { 
    position:fixed; 
} 

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

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

Answer 2

że chcesz position:fixed zamiast position:absolute.

Fiddle

CSS Position Documentation

Answer 3

Czy to, co zamierzałeś?

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

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

Jeśli chcesz nawigacji przymocowany do okna, absolutny nie będzie działać. Wartość bezwzględna nie usuwa elementu ze strumienia stron, więc przewijanie zawsze przesunie element pozycjonowany absolutnie, ponieważ ramka odniesienia jest sama w sobie, a nie okno .

Naprawione elementy są całkowicie usuwane ze strony i są zakorzenione w samym obszarze okna.